ReactJS中如何Mock父组件内导入的子组件以复用现有Mock逻辑？

你可以直接使用单测框架（Jest/Vitest）内置的模块Mock能力实现需求，无需重复编写子组件Mock逻辑，具体操作如下： #

前置准备 #

确认你已经编写好的<Example/>组件Mock逻辑存储位置：

• 通用方案：将Mock逻辑放在Example组件同层级的__mocks__/Example.jsx（js/ts/tsx都适配）文件中，这是单测框架默认识别的公共Mock路径
• 自定义存储：如果你的Mock逻辑单独存放在其他文件，比如mocks/example-mock.js，可以直接导出Mock后的组件对象

测试用例编写 #

以Jest + React Testing Library为例，测试代码写法如下：

// 优先Mock Example组件的导入路径，调用后所有依赖该路径的导入都会被替换为Mock版本
jest.mock('./Example'); 

// 再导入需要测试的Parent组件，Parent内部导入的Example已经自动替换为你预先写好的Mock版本
import { render, screen } from '@testing-library/react';
import Parent from './Parent';

test('测试Parent组件渲染逻辑', () => {
  render(<Parent />);
  // 此处正常编写Parent的测试逻辑即可，内部渲染的就是已Mock完成的Example组件
  expect(screen.getByTestId('parent-container')).toBeInTheDocument();
});

如果你的Mock逻辑没有放在__mocks__目录下，只需要修改jest.mock的传参直接复用已有Mock即可：

import { preDefinedMockExample } from './your-mock-file-path';
jest.mock('./Example', () => preDefinedMockExample);

适配Vitest的情况 #

如果使用Vitest作为测试框架，仅需要将上述代码中的jest.mock替换为vi.mock，其余逻辑完全一致。

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