React 16中使用RTL测试Material UI Drawer的Esc关闭功能

针对你遇到的按Esc键或点击外部无法触发Drawer关闭的测试问题，以下是具体的排查和修复方案：

先确认Drawer基础配置 #

确保你的Drawer组件使用了正确的变体和回调绑定，只有模态类型的Drawer才会响应外部点击和Esc键：

import { useState } from 'react';
import Drawer from '@material-ui/core/Drawer';

function DrawerTest() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  // 确保onClose正确更新状态
  const handleClose = () => setOpen(false);

  return (
    <div>
      <button onClick={handleOpen}>Open Drawer</button>
      {/* 默认variant="temporary"为模态类型，会响应外部点击和Esc */}
      <Drawer open={open} onClose={handleClose}>
        <div>Drawer Content</div>
      </Drawer>
    </div>
  );
}

export default DrawerTest;

修复Esc键关闭测试 #

使用userEvent.keyboard模拟真实键盘交互（比fireEvent更贴近用户行为），同时确保等待状态异步更新：

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import DrawerTest from './DrawerTest';

test('Drawer关闭：按下Esc键', async () => {
  const user = userEvent.setup();
  render(<DrawerTest />);

  // 打开Drawer
  await user.click(screen.getByText('Open Drawer'));
  expect(screen.getByText('Drawer Content')).toBeInTheDocument();

  // 模拟按下Esc键
  await user.keyboard('{Escape}');
  
  // 等待状态更新后断言
  await waitFor(() => {
    expect(screen.queryByText('Drawer Content')).not.toBeInTheDocument();
  });
});

修复外部点击关闭测试 #

Material UI的模态Drawer会生成一个背景遮罩（backdrop），点击外部实际是点击这个遮罩元素，需要定位到它再触发点击：

test('Drawer关闭：点击外部区域', async () => {
  const user = userEvent.setup();
  render(<DrawerTest />);

  await user.click(screen.getByText('Open Drawer'));
  expect(screen.getByText('Drawer Content')).toBeInTheDocument();

  // 获取遮罩元素（通过role或类名定位）
  const backdrop = screen.getByRole('presentation');
  // 或者用类名：screen.getByClassName('MuiBackdrop-root')
  
  await user.click(backdrop);
  await waitFor(() => {
    expect(screen.queryByText('Drawer Content')).not.toBeInTheDocument();
  });
});

常见排查点 #

• 如果你使用variant="persistent"，需要额外设置modal={true}才能响应外部点击和Esc键。
• 确保@testing-library/react版本与React 16.9.0兼容（推荐使用v9.x系列）。
• 避免直接点击document.body，因为Drawer的遮罩会阻止事件冒泡到body。

内容的提问来源于stack exchange，提问作者Harish Mohanani