Vue3 Vitest中mock vue-router的useRoute访问path报错求助

常见原因及对应解法 #

1. Mock执行时机晚于组件导入 #

如果测试文件中先导入组件、再执行vi.mock，组件初始化时会调用真实的useRoute而非Mock版本，导致返回undefined，读取path时触发错误。

解法：
把vi.mock放在文件最顶部，Vitest会自动将其提升到所有导入之前执行：

// 放在文件第一行
vi.mock('vue-router', () => ({
  useRoute: vi.fn(() => ({ path: '/signIn' }))
}))

// 后续再导入组件和测试工具
import MyComponent from './MyComponent.vue'
import { mount } from '@vue/test-utils'

2. 组件使用解构赋值导致Mock匹配异常 #

若组件中直接解构useRoute的返回值（如const { path } = useRoute()），可能因Mock未正确绑定返回值，导致解构时拿到undefined。

解法：
在测试用例中手动指定useRoute的返回值，确保每次调用都能拿到含path的对象：

import { useRoute } from 'vue-router'
import MyComponent from './MyComponent.vue'
import { mount } from '@vue/test-utils'

// 先声明Mock
vi.mock('vue-router')

test('测试组件逻辑', () => {
  // 手动设置Mock返回值
  (useRoute as jest.Mock).mockReturnValue({ path: '/signIn' })
  const wrapper = mount(MyComponent)
  // 编写测试断言
})

3. 全局路由配置干扰Mock生效 #

如果Vitest配置中全局注册了Vue Router实例，会覆盖Mock的useRoute，导致组件调用真实路由的方法。

解法：
直接创建测试专用的路由实例，挂载组件时传入，无需Mock：

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import MyComponent from './MyComponent.vue'

test('测试组件路由匹配', () => {
  const router = createRouter({
    history: createWebHistory(),
    routes: [{ path: '/signIn', component: MyComponent }]
  })
  // 跳转到目标路径
  router.push('/signIn')

  const wrapper = mount(MyComponent, {
    global: {
      plugins: [router]
    }
  })
  // 编写测试断言
})

4. Mock路径与组件导入路径不匹配 #

若组件中useRoute的导入路径不是vue-router（比如从vue-router/composables导入），Mock的路径错误会导致Mock不生效。

解法：
检查组件中useRoute的导入语句，确保Mock的路径完全一致。例如组件中是：

import { useRoute } from 'vue-router/composables'

则Mock语句应改为：

vi.mock('vue-router/composables', () => ({
  useRoute: vi.fn(() => ({ path: '/signIn' }))
}))

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