Jest与Enzyme测试报错：如何在父组件测试中Mock带withRouter的组件？

return (<UserListComponent />)

别担心，这个问题很好解决！核心思路就是在测试里把依赖Router的<Contacts />组件给Mock掉，让测试时渲染的是我们自己定义的“假”组件，完全绕开withRouter的Router上下文要求。下面给你几种实用的方法：

方法一：用Jest直接Mock整个Contacts模块 #

这是最简单直接的方式，在你的测试文件顶部加上一行代码，直接替换掉原Contacts组件的导出：

// 注意替换成你项目中Contacts组件的实际路径
jest.mock('./components/Contacts', () => () => <div>Mocked Contacts List</div>);

这样当

return (<UserListComponent />)

jest.mock('./components/Contacts', () => (props) => <div {...props}>Mocked Contacts List</div>);

方法二：在测试用例中动态Mock组件 #

如果你只想在某个特定测试用例中Mock Contacts，而不是全局Mock，可以用jest.spyOn来临时替换：

import { render } from '@testing-library/react';
import UserListComponent from './UserListComponent';

test('渲染UserListComponent时不触发Router错误', () => {
  // 定义Mock组件
  const MockContacts = () => <div>Mocked Contacts</div>;
  // 临时替换Contacts的导出
  const spy = jest.spyOn(require('./components/Contacts'), 'default').mockImplementation(MockContacts);
  
  render(<UserListComponent />);
  
  // 这里可以添加你的断言逻辑，比如检查Contact组件是否渲染，Mock的Contacts是否存在等
  
  // 测试结束后恢复原组件（可选，避免影响其他测试）
  spy.mockRestore();
});

方法三：结合Enzyme浅渲染Mock组件 #

如果你用Enzyme做测试，浅渲染时配合Jest Mock也能轻松解决：

import { shallow } from 'enzyme';
import UserListComponent from './UserListComponent';
import Contacts from './components/Contacts';

// 提前Mock Contacts组件
jest.mock('./components/Contacts');

test('正确渲染UserListComponent的结构', () => {
  const wrapper = shallow(<UserListComponent />);
  // 验证Contact组件正常渲染
  expect(wrapper.find('Contact')).toHaveLength(1);
  // 验证Mock后的Contacts组件被渲染
  expect(wrapper.find(Contacts)).toHaveLength(1);
});

注意事项 #

• 一定要保证Mock时的组件路径和你在

  return (<UserListComponent />)
  

  中导入Contacts的路径完全一致，否则Mock不会生效。
• 如果你的测试需要验证Contacts组件的某些交互逻辑，也可以在Mock组件中添加对应的模拟函数，比如：

jest.mock('./components/Contacts', () => ({
  __esModule: true,
  default: jest.fn(() => <div>Mocked Contacts</div>)
}));
// 然后在测试中可以断言这个Mock函数是否被调用
import Contacts from './components/Contacts';
expect(Contacts).toHaveBeenCalled();

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