如何使用Vitest对依赖的依赖进行Mock？

可能的原因及对应解决方案 #

1. 确认Vitest对__mocks__目录的识别规则 #

Vitest默认识别与目标依赖同级的__mocks__目录，但如果依赖是第三方包，需确保__mocks__放在项目根目录，或在vitest.config.ts中明确指定mock路径：

// vitest.config.ts
export default defineConfig({
  test: {
    mock: {
      mockPath: './__mocks__'
    }
  }
})

2. 保证vi.mock在依赖导入前执行 #

Vitest的vi.mock会被提升到模块顶部执行，但如果setup.ts的执行顺序滞后，可能导致mock晚于依赖加载：

• 可以在每个测试文件顶部直接调用vi.mock('nestedDependency')，替代仅在setup.ts中配置的方式
• 确认vitest.config.ts中已正确指定setup文件：setupFiles: ['./test/setup.ts']

3. 手动指定Mock文件路径 #

若自动识别失败，直接在vi.mock中绑定mock文件：

// test/setup.ts 或测试文件顶部
vi.mock('nestedDependency', async () => {
  const actual = await vi.importActual('nestedDependency')
  const mockContent = await import('../__mocks__/nestedDependency.js')
  return { ...actual, ...mockContent }
})

4. 统一模块格式兼容性 #

如果目标依赖是ES模块，确保mock文件也使用ES模块格式（用export/export default导出）；若是CommonJS模块，mock文件对应使用module.exports。同时可在配置中开启全局变量：

// vitest.config.ts
export default defineConfig({
  test: {
    globals: true
  }
})

5. 验证Mock是否生效 #

在测试文件中添加调试代码，确认mock内容是否被正确加载：

import nestedDependency from 'nestedDependency'
console.log(nestedDependency) // 输出应为你的mock内容而非原依赖

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