React组件测试：document兼容问题及jsdom、Enzyme用法疑问

为什么会报错？ #

你用shallow渲染的时候，Enzyme只是做浅渲染——它只会渲染组件本身，不会把组件挂载到真实的DOM树里。也就是说，你的组件元素根本没出现在document对象中，document.getElementById()自然找不到目标元素，肯定会报错。这时候必须切换到mount渲染，它会把组件挂载到jsdom模拟的浏览器DOM环境中，让DOM操作能正常工作。

正确配置jsdom并编写测试 #

下面是完整的解决步骤，包含组件示例、jsdom配置和测试用例：

1. 补全你的React组件示例（假设完整逻辑如下） #

import React, { Component } from 'react';

class LikesAmount extends Component {
  constructor() {
    super();
    this.state = {
      totalLikes: 0
    };
  }

  componentDidMount() {
    // 一定要在组件挂载后操作DOM，确保元素已存在
    const likesElement = document.getElementById('likes-count');
    if (likesElement) {
      // 示例：从DOM元素的自定义属性读取初始点赞数
      const initialLikes = parseInt(likesElement.dataset.initialLikes) || 0;
      this.setState({ totalLikes: initialLikes });
    }
  }

  render() {
    return (
      <div id="likes-count" data-initial-likes="10">
        当前点赞数：{this.state.totalLikes}
      </div>
    );
  }
}

export default LikesAmount;

2. 配置jsdom并编写测试用例 #

在测试文件中先初始化jsdom环境，再用mount渲染组件：

import React from 'react';
import { mount } from 'enzyme';
import { JSDOM } from 'jsdom';
import LikesAmount from './LikesAmount';

// 初始化jsdom，模拟浏览器的window和document
const dom = new JSDOM('<!DOCTYPE html><div id="root"></div>');
global.window = dom.window;
global.document = dom.window.document;

describe('LikesAmount Component', () => {
  it('应该正确读取DOM元素并更新状态', () => {
    // 将组件挂载到jsdom的根元素中
    const wrapper = mount(<LikesAmount />, { attachTo: document.getElementById('root') });
    
    // 验证状态是否正确更新
    expect(wrapper.state('totalLikes')).toBe(10);
    // 验证DOM渲染内容符合预期
    expect(wrapper.find('#likes-count').text()).toContain('当前点赞数：10');
  });

  // 测试完成后清理全局环境
  afterAll(() => {
    delete global.window;
    delete global.document;
  });
});

关键注意事项 #

• 必须用mount替代shallow：只有mount会把组件挂载到模拟DOM中，让document能访问到组件的元素。
• DOM操作要在组件挂载后执行：类组件里放在componentDidMount，函数组件里放在useEffect（不带依赖项的版本），确保元素已经渲染到DOM中。
• jsdom初始化要提供完整HTML结构：至少要有一个根元素（比如示例中的<div id="root"></div>），方便挂载组件。

这样配置后，你的组件里的document.getElementById()就能正常找到目标元素，Enzyme也不会再报错了。

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