React组件Tooltip悬停测试报错：TypeError: Cannot read properties of null

问题代码 #

我编写了一个用于检查React组件中鼠标悬停时Tooltip值的测试用例，代码如下：

it("displays XYZ Information with 'Code' in a tooltip", async () => {
    (useRouter as jest.Mock).mockImplementation(() => ({ locale: "en-us" }));
    ....
    const { container } = renderPage(<Comp {...comprops} FLAG={true} />);
    await screen.findByRole("button", { name: /settings/i });
    const creatorCodeTooltip = container.querySelector(".tooltip-element");
    expect(creatorCodeTooltip).toBeInTheDocument();

    userEvent.hover(creatorCodeTooltip);

    waitFor(() => {
      expect(screen.queryByText(/TESTCREATORCODE1P8/i)).toBeInTheDocument();
    });
  });

报错信息 #

运行时出现如下错误：

node_modules/react-dom/cjs/react-dom.development.js:3905
      var evt = document.createEvent('Event');
                         ^

TypeError: Cannot read properties of null (reading 'createEvent')
    at Object.invokeGuardedCallbackDev (.../node_modules/react-dom/cjs/react-dom.development.js:3905:26)
    at invokeGuardedCallback (.../node_modules/react-dom/cjs/react-dom.development.js:4056:31)
    at flushPassiveEffectsImpl (.../node_modules/react-dom/cjs/react-dom.development.js:23543:11)
    at unstable_runWithPriority (.../node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority$1 (.../node_modules/react-dom/cjs/react-dom.development.js:11276:10)
    at flushPassiveEffects (.../node_modules/react-dom/cjs/react-dom.development.js:23447:14)
    at Object.<anonymous>.flushWork (.../node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
    at Immediate.<anonymous> (.../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1003:11)
    at processImmediate (node:internal/timers:466:21)

解决方法 #

• 确保Tooltip元素稳定后再执行hover
  虽然代码中已经断言元素存在，但container.querySelector不会等待元素完全渲染完成。建议给Tooltip组件添加data-testid="tooltip-element"，改用screen.findByTestId获取元素，它会自动等待元素挂载：

  // 替换原有的querySelector逻辑
  const creatorCodeTooltip = await screen.findByTestId("tooltip-element");
  await userEvent.hover(creatorCodeTooltip);
  

• 给waitFor添加await并优化断言
  原代码中waitFor没有使用await，会导致测试流程提前结束，引发DOM异常。同时，queryByText返回null时不会抛出错误，改用getByText更适合断言元素存在：

  await waitFor(() => {
    expect(screen.getByText(/TESTCREATORCODE1P8/i)).toBeInTheDocument();
  });
  

• 检查Jest的DOM环境配置
  这个报错大概率是测试环境中document对象为null导致的，确认Jest配置文件（jest.config.js）中启用了jsdom环境：

  module.exports = {
    testEnvironment: "jsdom",
    // 其他配置项...
  };
  

• 优先使用screen查询而非container
  screen提供的查询方法（如findBy*、getBy*）是React Testing Library推荐的方式，会自动处理异步渲染，比直接操作container更可靠，能减少DOM元素未就绪的问题。

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