如何测试Material UI（MUI）Modal组件的onClose函数

MUI的Modal点击外部关闭的逻辑，其实是通过点击它的**全屏背景层（backdrop）**触发的，不是直接点击document.body——这就是你之前的方法无效的核心原因。下面是正确的测试步骤和代码示例：

正确测试流程 #

1. 模拟关闭回调：用Jest创建一个mock函数，用来追踪关闭事件是否被触发
2. 渲染打开状态的Modal：确保Modal处于open={true}状态，此时会自动渲染出全屏背景层
3. 定位背景层元素：MUI默认给背景层添加了role="presentation"属性，也可以手动给背景层加data-testid来精准定位
4. 触发点击并验证：用userEvent模拟点击背景层，然后断言mock函数是否被调用

完整测试代码示例 #

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Modal } from '@mui/material';

test('Modal closes when clicking outside content', async () => {
  const mockClose = jest.fn();
  const user = userEvent.setup();

  // 渲染处于打开状态的Modal
  render(
    <Modal open={true} onClose={mockClose}>
      <div data-testid="modal-inner">弹窗内容区域</div>
    </Modal>
  );

  // 定位MUI默认的背景层元素
  const backdrop = screen.getByRole('presentation');
  // 如果你给背景层加了自定义testid，也可以这样定位：
  // const backdrop = screen.getByTestId('modal-backdrop');

  // 模拟用户点击背景层（即弹窗外部区域）
  await user.click(backdrop);

  // 验证关闭回调被触发
  expect(mockClose).toHaveBeenCalledTimes(1);
});

额外补充 #

• 若要验证点击弹窗内部区域不会触发关闭，可以点击modal-inner元素，然后断言mockClose没有被调用
• 优先使用userEvent而非fireEvent，因为userEvent会模拟完整的用户交互流程（mousedown → mouseup → click），更贴近真实场景

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