如何使用Jest模拟react-dom模块开展React组件测试？

看起来你正在用Jest+Enzyme测试React组件，还尝试mock react-dom的render方法，我结合你的代码片段给你一些实用的技术指导：

首先先补全你提供的测试代码片段（方便后续讲解）：

import React from 'react'; 
import {configure, shallow } from 'enzyme'; 
import Adapter from 'enzyme-adapter-react-16'; 
import Link from '../components/DumbComp'; 
import { shallowToJson } from 'enzyme-to-json'; 
import { render } from 'react-dom'; 

configure({ adapter: new Adapter() }); 
jest.mock('react-dom'); 

describe('Link',() =>{ 
  it('should render correctly', ()=>{ 
    expect(render).toHaveBeenCalledWith( <Link title="mockTitle" url="mockUrl" />, expect.anything());
  });
});

1. 正确理解jest.mock('react-dom')的作用 #

• Jest的jest.mock()会自动将react-dom模块的所有方法替换为空的mock函数（jest.fn()），所以你可以直接通过expect(render).toHaveBeenCalledWith(...)来断言render方法的调用情况
• 如果你需要自定义mock的行为（比如让render返回特定值），可以手动实现mock逻辑：

  jest.mock('react-dom', () => ({
    render: jest.fn(() => 'mocked-render-result')
  }));
  

2. 结合测试目标选择合适的渲染方式 #

你当前同时用到了Enzyme的shallow和react-dom的render，这里需要明确你的测试目标：

• 如果只是测试组件的渲染输出（快照测试），用Enzyme的shallow或mount配合enzyme-to-json会更高效：

  it('should match snapshot', () => {
    const wrapper = shallow(<Link title="mockTitle" url="mockUrl" />);
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
  

• 如果是测试react-dom.render是否被正确调用（比如验证组件是否被挂载到DOM），你的当前写法是合理的，但要注意断言的细节：
  • render的第二个参数通常是DOM节点，你可以用expect.anything()匹配任意DOM节点，或者手动模拟一个DOM节点来精准断言：

    const mockRoot = document.createElement('div');
    render(<Link title="mockTitle" url="mockUrl" />, mockRoot);
    expect(render).toHaveBeenCalledWith(<Link title="mockTitle" url="mockUrl" />, mockRoot);
    

3. 测试用例的隔离与清理 #

为了避免测试用例之间的相互干扰，建议添加初始化和清理逻辑：

• 每次测试前清空mock函数的调用记录：

  beforeEach(() => {
    jest.clearAllMocks();
  });
  

• 如果你在测试中操作了真实DOM，记得在测试后清理DOM环境：

  afterEach(() => {
    document.body.innerHTML = '';
  });
  

4. 常见问题排查技巧 #

• 如果遇到expect(render).toHaveBeenCalledWith(...)断言失败，可能是JSX元素的严格匹配问题：Jest会严格比较JSX对象，你可以用expect.elementContaining()来模糊匹配React元素，或者直接校验组件的props：

  expect(render).toHaveBeenCalledWith(
    expect.elementContaining({ props: { title: "mockTitle", url: "mockUrl" } }),
    expect.anything()
  );
  

• 确保Enzyme适配器版本与React版本匹配：你用了enzyme-adapter-react-16，要确认你的React版本是16.x；如果是更高版本（比如17/18），需要更换对应的适配器（如@wojtekmaj/enzyme-adapter-react-17）

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