React单元测试：querySelector可找到元素但fireEvent提示DOM不存在

你提到已经校验关闭按钮存在，但实际你的代码并没有对closeButton做存在性断言，仅做了变量赋值，无法证明元素真实存在。报错的核心原因有以下几种：

• 重复查询导致元素丢失：你前一行已经通过查询拿到了closeButton变量，但触发点击时又重新执行了一次DOM查询，两次查询的间隙如果DOM发生更新（比如模态框的异步渲染还在进行、Portal挂载延迟），第二次查询就会返回null
• 模态框使用Portal渲染：绝大多数React模态框组件库（Ant Design、Material UI等）默认会把模态框DOM渲染到document.body节点下，而非你挂载组件的wrapper.container内部，从wrapper.container范围查询自然拿不到元素
• 异步渲染未等待：点击打开模态框后，React的状态更新、模态框的DOM渲染都是异步的，同步执行查询时元素还没渲染到DOM上，出现偶现的查询返回null

按以下顺序排查修复即可解决问题：

1. 补上closeButton的存在性断言，确认元素确实被查询到
2. 复用已经查询到的closeButton变量触发点击，不要重复执行DOM查询
3. 处理Portal和异步渲染问题：如果确认模态框使用Portal渲染，改为从document.body范围查询，同时增加异步等待逻辑，确保DOM更新完成后再操作
4. （可选）建议把DOM上的data-ref属性改为data-testid，符合React Testing Library的规范，可直接使用getByTestId/findByTestId等内置查询方法

修复后代码示例 #

import { waitFor, fireEvent } from '@testing-library/react';

it('launches dialog and can close dialog with close button', async () => {
  const wrapper = mountComponent();

  // 点击打开对话框
  fireEvent.click(wrapper.container.querySelector('[rel="file-as-nil-button"]'));

  // 等待对话框渲染完成，验证存在
  const filAsNilDialog = await waitFor(() => {
    const dialog = document.body.querySelector('[data-ref="file-as-nil-dialog"]');
    expect(dialog).toBeTruthy();
    return dialog;
  });

  // 查询关闭按钮，验证存在后点击
  const closeButton = document.body.querySelector('[data-ref="cancel"]');
  expect(closeButton).toBeTruthy();
  fireEvent.click(closeButton);

  // 额外补充关闭验证，匹配测试目标
  await waitFor(() => {
    expect(document.body.querySelector('[data-ref="file-as-nil-dialog"]')).toBeFalsy();
  });
});

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