React Testing Library+Vitest测试父组件时Mock子组件失效问题

• Mock路径与父组件导入路径不匹配
  确保测试文件中Mock子组件的路径，和父组件里导入子组件的路径完全一致。比如父组件用import Child from './Child'，测试里的Mock就得是jest.mock('./Child', ...)；如果用了路径别名（如@/components/Child），要保证Mock路径也使用相同别名，同时在Vite测试配置中正确配置别名映射，让Jest能解析。

• 导入顺序错误
  jest.mock()必须写在导入父组件的代码之前。如果先导入Parent组件，再Mock Child，此时Parent已经加载了真实的Child组件，后续的Mock不会生效。正确顺序示例：

  // 先Mock子组件
  jest.mock('./Child', () => () => <div data-testid="mock-child" />);
  // 再导入父组件
  import Parent from './Parent';
  

• Vite测试配置未适配Mock需求
  检查Vite的test配置项，确保resolve.alias和开发环境一致，避免Jest无法解析Mock路径。示例配置：

  // vite.config.ts
  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    test: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
    },
  });
  

• Mock实现方式错误
  确认Mock返回的是有效的React组件：

  • 若子组件是默认导出，Mock需对应default导出：

    jest.mock('./Child', () => ({
      default: () => <div data-testid="mock-child" />
    }));
    

  • 若子组件是具名导出，要Mock对应的具名项，而非默认导出。

• setupTests.ts全局配置干扰
  检查setupTests.ts中是否提前导入了真实的Child组件，或者设置了全局Mock规则，导致测试文件的局部Mock被覆盖。

• Jest模块缓存问题
  之前的测试运行可能缓存了真实的Child组件，执行以下命令清除缓存：

  jest --clearCache
  

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