Jest测试React项目报Target Container is not a DOM Element如何解决

问题原因 #

Jest运行的测试环境默认不会加载项目的index.html文件，因此不存在id为root的DOM节点。当你导入index.tsx时，文件内的ReactDOM.render逻辑会立即执行，调用document.getElementById("root")返回null，就会抛出Target Container is not a DOM Element错误。

解决方案 #

方案1（最优，99%场景适用）：删除测试文件中index.tsx的导入语句 #

单元测试仅需要导入你实际要测试的业务组件（比如App.tsx或者其他子组件）即可，index.tsx是应用的全局入口挂载文件，不属于常规单元测试的覆盖范围，无需在测试文件中引入。
修改你的test.tsx，直接删掉import '../index.tsx';这一行即可解决报错。

方案2：确实需要测试入口挂载逻辑的处理 #

如果你有特殊需求必须在测试中引入index.tsx，可以选择以下任意一种方式处理：

• 方式A：测试环境提前创建root节点
  你可以在测试文件顶部添加初始化逻辑，或者在Jest全局配置的setup文件中添加如下代码，提前在DOM中插入root节点：

beforeAll(() => {
  const rootNode = document.createElement('div');
  rootNode.id = 'root';
  document.body.appendChild(rootNode);
});

• 方式B：给index.tsx的render逻辑加守卫判断
  修改index.tsx的代码，只有当root节点真实存在时才执行挂载逻辑，避免非生产环境报错：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import store from "./store/createStore";

const rootElement = document.getElementById("root");
// 仅当root节点存在时执行挂载
if (rootElement) {
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </React.StrictMode>,
    rootElement
  );
}

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