Vue3组件测试：使用Vitest mock路由常量ROUTES报错如何解决？

问题根源 #

你当前的 mock 写法不符合原模块的导出结构：
你的组件是从 @/services/routes 中导入 ROUTES 常量（原模块导出的是名为 ROUTES 的对象），但你用 vi.mock 直接导出了 myRoute 属性，导致组件中获取到的 ROUTES 是 undefined，访问 ROUTES.myRoute 自然会抛出类型错误。

正确的 Mock 写法 #

根据原模块的导出方式选择对应的写法：

情况1：原模块为命名导出 ROUTES

如果 @/services/routes 的代码是这样的：

export const ROUTES = { myRoute: "myRoute" }

那么 mock 要对应导出同名的 ROUTES 对象：

vi.mock('@/services/routes', () => ({
  ROUTES: { myRoute: 'my-path' }
}))

情况2：原模块为默认导出 ROUTES

如果 @/services/routes 的代码是这样的：

export default { myRoute: "myRoute" }

那么 mock 要导出 default 对象：

vi.mock('@/services/routes', () => ({
  default: { myRoute: 'my-path' }
}))

额外注意事项 #

• 确保 vi.mock 调用在组件导入之前（通常放在测试文件的最顶部即可，Vitest 会自动提升 mock 逻辑）；
• 如果你的组件中是通过 import ROUTES from '@/services/routes' 导入的，对应情况2；如果是 import { ROUTES } from '@/services/routes'，对应情况1。

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