React TypeScript测试报错：目标容器非DOM元素及后续问题

我来帮你拆解下这个问题的根源，以及对应的解决办法：

错误原因分析 #

你遇到的“Target container is not a DOM element”报错，本质是测试环境触发了src/index.tsx里的ReactDOM.render代码，但测试环境没有提供对应的DOM容器。

具体来说：你的测试代码导入了Feature组件，而Feature或它依赖的某个模块（比如services、sagas）又导入了index.tsx里导出的history或store。这会导致整个index.tsx文件被执行，包括里面的ReactDOM.render调用。但Jest是在Node环境下运行测试的，默认不会加载你项目public/index.html里的<div id="root">元素，所以document.getElementById('root')返回null，自然就报了这个错。

解决原错误的两种方案 #

方案1：将store/history移到独立模块（你已经尝试的方向） #

把history和store的初始化逻辑从index.tsx中抽离到单独的文件（比如src/store/index.ts或src/initialState.ts），这样其他模块导入history或store时，只会加载这个独立模块，不会触发index.tsx里的ReactDOM.render代码。这也是你移走后原错误消失的原因。

方案2：给ReactDOM.render添加环境判断 #

如果不想移动代码，可以在index.tsx里给ReactDOM.render加上条件，只在浏览器环境下执行：

// src/index.tsx
// ... 你的store和history初始化代码

// 只有在浏览器环境（非测试）才执行渲染
if (typeof document !== 'undefined') {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router history={history}>
          <App />
        </Router>
      </PersistGate>
    </Provider>,
    document.getElementById('root')
  );
}

Jest运行在Node环境中，typeof document会是undefined，所以这段渲染代码不会被执行，也就不会报错了。

关于移走后出现的新错误 #

你提到移走后出现了新的独立错误，这通常和测试环境下的store/history配置有关，常见的排查方向：

• 测试专用store：不要直接使用生产环境的store，应该为测试创建一个模拟或精简版的store，比如使用configureStore时传入测试用的初始状态，或者用Redux的mockStore工具。
• history适配测试环境：生产环境用createBrowserHistory，但测试环境应该用createMemoryHistory，因为它不依赖浏览器的window对象，更适合测试。
• 检查依赖模块的导入：确保services/sagas等模块在测试时导入的是测试环境的store/history，而不是生产环境的。

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