React测试时如何访问root根节点外部的DOM元素？

报错原因 #

React Testing Library 运行测试时不会加载项目中的 index.html 结构，默认只会创建独立的容器节点渲染被测组件，你代码中依赖的id="hidden-span"元素在测试环境的DOM树中不存在，所以document.getElementById('hidden-span')返回null，调用innerHTML就会抛出空指针错误。

解决方案 #

• 方案1：测试执行前手动插入目标元素到DOM中
  修改测试文件，在渲染组件前先创建对应的span元素：

// Foo.test.js
import { render } from '@testing-library/react';
import Foo from './components';

// 渲染组件前创建目标span
beforeEach(() => {
  const hiddenSpan = document.createElement('span');
  hiddenSpan.id = 'hidden-span';
  hiddenSpan.className = 'hidden-tag';
  document.body.appendChild(hiddenSpan);
});

// 测试结束后清理元素，避免影响其他测试
afterEach(() => {
  document.getElementById('hidden-span')?.remove();
});

test('测试Foo组件逻辑', () => {
  render(<Foo />);
  // 后续测试逻辑
});

• 方案2：给组件逻辑增加空值判断，兼容边界场景
  修改Foo组件代码，先判断元素存在再执行操作，同时也能避免线上环境万一元素缺失导致的页面报错：

// Foo.js
const Foo = () => {
    const ele = document.getElementById('hidden-span');
    if (ele) {
      ele.innerHTML = 'dsaas';
    }
}

• 方案3：全局配置公共DOM元素
  如果多个组件都依赖这个外部span，可以在Jest的全局配置文件中统一添加元素，不用每个测试文件重复编写：

// jest.setup.js
const hiddenSpan = document.createElement('span');
hiddenSpan.id = 'hidden-span';
hiddenSpan.className = 'hidden-tag';
document.body.appendChild(hiddenSpan);

之后在jest.config.js中添加配置setupFilesAfterEnv: ['<rootDir>/jest.setup.js']即可生效。

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