如何在Vitest中实现全局统一的手动Mock？

方案一：结合 mocks 文件夹 + 全局 Setup 文件 #

Vitest 确实支持 mocks 目录，但默认不会自动全局加载，需要配合全局 setup 文件批量触发 mock：

1. 根目录创建 __mocks__ 文件夹，按模块名创建对应的 mock 文件。比如要 mock axios，创建 __mocks__/axios.ts：

   import { vi } from 'vitest'
   
   export default {
     get: vi.fn().mockResolvedValue({ data: '全局 Mock 数据' }),
     post: vi.fn().mockResolvedValue({ data: '提交成功' })
   }
   

2. 创建全局 setup 文件，比如 tests/global-setup.ts，在里面统一调用 vi.mock 加载 mocks 中的文件：

   import { vi } from 'vitest'
   
   // 批量全局 mock 外部模块
   vi.mock('axios')
   vi.mock('lodash') // 假设你也需要 mock lodash
   

3. 在 vitest.config.ts（或 vite.config.ts 的 test 字段）中配置 setup 文件：

   import { defineConfig } from 'vitest/config'
   
   export default defineConfig({
     test: {
       setupFiles: ['./tests/global-setup.ts'],
       injectGlobals: true // 可选，开启后测试文件无需手动导入 vi
     }
   })
   

   这样所有测试文件都会自动使用 mocks 里的实现。

方案二：直接在 Setup 文件中定义全局 Mock #

如果不想维护 mocks 目录，也可以直接在全局 setup 文件中编写 mock 逻辑：

// tests/global-setup.ts
import { vi } from 'vitest'

vi.mock('axios', () => ({
  default: {
    get: vi.fn().mockResolvedValue({ data: '全局 Mock 数据' }),
    post: vi.fn().mockResolvedValue({ data: '提交成功' })
  }
}))

// 其他模块的 mock 同理
vi.mock('@/utils/api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Mock User' })
}))

同样在 vitest 配置中指定这个 setup 文件即可全局生效。

常见问题排查 #

• 如果 mocks 目录不生效，检查模块路径是否匹配：比如你 mock 的是 axios，那么 mocks 里的文件名必须是 axios.ts（或 .js），不能带多余后缀或路径。
• 若使用了路径别名（如 @/），需要在 vitest.config.ts 的 resolve.alias 中配置和 Vite 一致的别名，确保 mock 文件能被正确解析。
• 确保没有在单个测试文件中重新 mock 同一模块，否则会覆盖全局配置。

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