React 18测试报错：createRoot目标容器非DOM元素求助

原因分析 #

• 测试环境DOM未初始化#root元素：Jest依赖的jsdom环境默认不会自动创建#root元素，若测试触发了入口文件index.js中的createRoot调用（比如测试整个App组件），就会找不到目标容器。
• 测试文件误引入入口文件：如果测试代码中直接import了index.js，入口里的createRoot会在测试DOM准备好前执行，导致找不到#root。
• 组件内部依赖全局#root：部分组件可能直接在内部调用ReactDOM.createRoot(document.getElementById('root'))，而非通过测试库提供的容器渲染，测试时自然找不到对应元素。

解决建议 #

• 在测试全局初始化中创建#root元素：
  在Jest的全局配置文件（如src/setupTests.js）中添加如下代码，确保所有测试执行前DOM中存在#root：

  import '@testing-library/jest-dom';
  
  beforeAll(() => {
    const rootElement = document.createElement('div');
    rootElement.id = 'root';
    document.body.appendChild(rootElement);
  });
  
  afterAll(() => {
    document.body.removeChild(document.getElementById('root'));
  });
  

• 避免测试中引入入口文件：
  检查所有测试文件，确保没有import '../index.js'这类代码。测试单个组件时，应直接渲染组件本身，而非引入整个应用入口。

• 使用测试库的render方法提供独立容器：
  测试组件时，依赖@testing-library/react的render方法自动创建容器，或手动指定容器，不要依赖全局的#root。例如测试需要Redux Provider的组件：

  import { render } from '@testing-library/react';
  import { Provider } from 'react-redux';
  import store from '../store';
  import App from './App';
  
  test('App渲染正常', () => {
    render(
      <Provider store={store}>
        <App />
      </Provider>
    );
    // 此处添加断言逻辑
  });
  

• 重构依赖全局#root的组件：
  如果组件内部直接调用createRoot绑定#root，需重构组件，将容器元素作为props传入，或在测试该组件前手动创建#root元素。

内容的提问来源于stack exchange，提问作者Daoud El Gharib