React项目index.js测试报错：Target container is not a DOM element

问题描述 #

为React项目的index.js编写测试用例时，执行测试触发「Target container is not a DOM element」错误，已导入所有必要文件，需解决该错误并获取index.js的测试覆盖率。

原index.js代码 #

import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
// 其他导入文件

const rootElement = document.getElementById('root');
ReactDOM.render(
    <AppRoot>
        <BrowserRouter>
          <title className='myAppTitle' id="myApp">MY APP</title>
          <div data-testId="index">
            <Routes>
              <Route path="/*" element={ <App /> } />
            </Routes>
          </div>
        </BrowserRouter>
    </AppRoot>,
    rootElement,
);

原测试用例代码 #

import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
// 其他导入文件

describe('index', () => {
    jest.mock('react-dom', ()=> ({render: jest.fn()}))
    const root = document.createElement('div');

    beforeEach(() => {
        document.body.appendChild(root);
    })
    it('should render without crashing', async () => {
       const rootElement = document.getElementById('root');
ReactDOM.render(
    <AppRoot>
        <BrowserRouter>
          <title className='myapptitle' id="myapp">MY APP</title>
          <div data-testId="index">
            <Routes>
              <Route path="/*" element={ <App /> } />
            </Routes>
          </div>
        </BrowserRouter>
    </AppRoot>,
    rootElement,
);
 expect(title).toBe('My App');
 expect(document.getElementById('myApp')).toBeTruthy();
    });
})

错误原因分析 #

1. DOM元素未匹配：测试中创建的div未设置id="root"，导致document.getElementById('root')返回null，传给ReactDOM.render时触发错误。
2. 测试逻辑冗余：测试里重复编写了ReactDOM.render代码，正确做法是直接导入index.js，触发文件本身的渲染逻辑，而非手动重复实现。
3. Mock与调用冲突：用jest.mock替换了react-dom的render方法，但测试中又手动调用该方法，逻辑混乱。

修正后的测试用例 #

import React from 'react';
import * as ReactDOM from 'react-dom';
// 直接导入index.js，触发内部渲染逻辑
import './index';

describe('index.js', () => {
  // 测试前创建带id="root"的DOM元素
  beforeEach(() => {
    const rootDiv = document.createElement('div');
    rootDiv.id = 'root';
    document.body.appendChild(rootDiv);
  });

  // 测试后清理DOM，避免污染后续测试
  afterEach(() => {
    document.body.innerHTML = '';
  });

  it('should render the app correctly', () => {
    // 验证ReactDOM.render被调用
    expect(ReactDOM.render).toHaveBeenCalled();
    
    // 验证页面存在预期元素及内容
    const titleElement = document.getElementById('myApp');
    expect(titleElement).toBeTruthy();
    expect(titleElement.textContent).toBe('MY APP');
  });
});

获取测试覆盖率的方法 #

1. 添加覆盖率参数运行测试：
   在终端执行测试命令时加上--coverage，示例：

   npm test -- --coverage
   # 或使用yarn
   yarn test --coverage
   

2. 配置覆盖范围：
   检查jest.config.js，确保coveragePathIgnorePatterns未将index.js排除在外。若需单独指定覆盖文件，可执行：

   npm test -- --coverage --collectCoverageFrom="src/index.js"
   

3. 查看覆盖率报告：
   执行命令后，Jest会生成coverage文件夹，打开其中的index.html文件，可查看语句、分支、函数等维度的详细覆盖数据。

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