React 18 + Jest 29.5.0测试报错：无法找到指定testid元素

核心问题 #

你手动创建了独立的JSDOM实例，并将组件渲染到这个自定义DOM环境中，但@testing-library/react的screen对象默认绑定到Jest配置的全局jsdom环境，两者不属于同一个上下文，因此screen无法找到你渲染到自定义DOM里的元素。

解决方案 #

1. 移除手动创建JSDOM和Root的代码
   Jest已经通过testEnvironment: jsdom配置了全局DOM环境，不需要你手动实例化JSDOM和创建root。

2. 使用Testing Library提供的render方法
   @testing-library/react的render方法会自动将组件挂载到全局DOM中，且与screen共享同一上下文。

修改后的测试代码 #

import { render, screen } from "@testing-library/react";

it("should render", () => {
  render(<div data-testid="testdiv">hi</div>);
  expect(screen.getByTestId(/testdiv/i)).toHaveTextContent("hi");
});

额外说明 #

• 你的package.json中Jest配置已经正确设置了jsdom环境，无需额外手动处理DOM。
• 原测试中使用toContain断言文本内容的方式不准确，推荐使用Testing Library适配的toHaveTextContent匹配器。

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