Vitest热重载后vi.mocked相关方法报错问题求助

方案1：热重载时手动重置mock实例 #

在测试文件或setupFile.ts中添加热重载钩子，强制重新初始化mock：

// 测试文件顶部或setupFile.ts
if (import.meta.hot) {
  import.meta.hot.on('vite:beforeUpdate', () => {
    vi.resetAllMocks()
    // 动态重新导入被mock的模块并重新设置mock逻辑
    import('@/your-target-module').then(module => {
      vi.mocked(module.targetMethod).mockImplementation(() => Promise.resolve(mockData))
    })
  })
}

方案2：避免链式调用，用变量存储mock对象 #

不要直接链式调用vi.mocked(...).mockImplementation，先把mock实例存到变量中再操作：

// 原错误写法
vi.mocked(targetMethod).mockImplementation(() => {})

// 修改后
const mockTargetMethod = vi.mocked(targetMethod)
mockTargetMethod.mockImplementation(() => Promise.resolve(mockData))

热重载时变量会保留正确的mock实例引用，不会丢失方法。

方案3：调整Vitest配置优化缓存 #

在vitest.config.ts中修改配置，减少mock相关的缓存问题：

export default defineConfig({
  test: {
    // 每次测试后自动重置mock状态
    mockReset: true,
    server: {
      watch: {
        // 热重载时忽略mock文件的缓存
        ignored: ['**/__mocks__/**'],
      },
    },
  },
})

方案4：用vi.spyOn替代vi.mocked #

针对单个方法的mock，使用vi.spyOn替代vi.mocked，热重载稳定性更好：

import * as targetModule from '@/your-target-module'

beforeEach(() => {
  vi.spyOn(targetModule, 'targetMethod').mockResolvedValue(mockData)
})

afterEach(() => {
  vi.restoreAllMocks()
})

额外注意事项 #

• 所有mock初始化逻辑放在beforeEach中，不要放在测试文件顶层（热重载时顶层代码可能不重新执行）
• 替换vi.clearAllMocks为vi.resetAllMocks或vi.restoreAllMocks，前者重置调用次数，后者恢复原始方法实现

内容的提问来源于stack exchange，提问作者Juan Andrés Romero