在React Testing Library中测试<dialog>的背景点击行为

因为::backdrop是CSS伪元素，并不存在于真实DOM树中，所以React Testing Library没法直接选中或交互它。不过可以通过以下几种间接方式测试这个行为：

方法一：模拟点击文档空白区域 #

点击<dialog>的背景（backdrop）本质上等同于点击弹窗之外的文档区域，所以可以直接点击document.body来模拟这个操作：

import { render, screen, userEvent } from '@testing-library/react';
import YourDialogComponent from './YourDialogComponent';

test('点击背景关闭弹窗', async () => {
  render(<YourDialogComponent />);
  
  // 先打开弹窗
  await userEvent.click(screen.getByText('打开弹窗'));
  const dialog = screen.getByRole('dialog');
  expect(dialog).toHaveAttribute('open');
  
  // 点击文档空白区域
  await userEvent.click(document.body);
  
  // 断言弹窗已关闭
  expect(dialog).not.toHaveAttribute('open');
});

方法二：触发原生弹窗的cancel/close事件 #

如果你的弹窗是用原生<dialog>的showModal()方法打开的，点击backdrop会自动触发cancel事件，部分浏览器对应close事件，可以直接触发该事件来模拟：

test('通过触发cancel事件测试背景关闭', () => {
  render(<YourDialogComponent />);
  
  fireEvent.click(screen.getByText('打开弹窗'));
  const dialog = screen.getByRole('dialog');
  
  // 触发cancel事件
  fireEvent.cancel(dialog);
  
  expect(dialog).not.toHaveAttribute('open');
});

方法三：针对自定义点击逻辑的模拟 #

如果你的组件是通过在<dialog>上绑定onClick事件，判断点击目标是否为弹窗本身（以此区分点击内容区还是背景），可以直接模拟点击弹窗元素本身：

假设你的组件代码是这样的：

function CustomDialog() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleDialogClick = (e) => {
    // 点击的是背景区域（即dialog元素本身）
    if (e.target === e.currentTarget) {
      setIsOpen(false);
    }
  };
  
  return (
    <dialog open={isOpen} onClick={handleDialogClick}>
      {/* 弹窗内容 */}
    </dialog>
  );
}

对应的测试代码可以直接点击dialog元素：

test('自定义逻辑下点击背景关闭弹窗', () => {
  render(<CustomDialog />);
  
  const dialog = screen.getByRole('dialog');
  fireEvent.click(dialog, { target: dialog });
  
  expect(dialog).not.toHaveAttribute('open');
});

核心思路是：不用纠结于直接操作::backdrop，而是测试点击背景后弹窗关闭这个最终行为，通过模拟等价的用户操作或事件来验证。

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