为何Vue的vue-test-utils单元测试点击按钮后无法跳转至正确路由？

核心问题总结 #

你的测试失败本质是异步操作未被正确等待，加上测试环境中路由配置可能存在疏漏，导致断言时机早于路由跳转完成的时间点。

具体原因及解决办法 #

• 测试未等待异步登录请求完成
  你的login方法里的fakelogin是异步操作（Promise），点击按钮后测试立即执行路由断言，此时异步请求还没resolve，路由跳转逻辑根本没触发。
  解决：用async/await包裹测试逻辑，配合waitFor等待路由状态变化，确保断言在跳转完成后执行。

• 测试环境未正确注入Vue Router实例
  单元测试时组件默认不会带上项目的路由配置，必须手动创建测试专用的路由实例并注入组件，否则组件内的$router或useRouter()无法正常工作。
  解决：在测试文件中创建路由实例，挂载组件时通过global.plugins注入。

• 异步请求模拟未正确处理
  如果fakelogin是真实的API请求（或未正确模拟的Promise），测试时会因为请求未完成导致后续逻辑阻塞。
  解决：用测试框架的mock工具（比如Jest的jest.mock、Vitest的vi.mock）把fakelogin模拟成一个立即resolve的Promise，确保登录逻辑能顺利走到路由跳转步骤。

修改后的测试示例代码 #

import { mount, waitFor } from '@vue/test-utils'
import TroubledLogin from '@/components/TroubledLogin.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Info from '@/components/Info.vue'
// 假设fakelogin在这个文件里，模拟它
import { fakelogin } from '@/api/auth'

jest.mock('@/api/auth', () => ({
  fakelogin: jest.fn().mockResolvedValue({ code: 200 })
}))

// 创建测试专用路由
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: TroubledLogin },
    { path: '/info', component: Info }
  ]
})

describe('TroubledLogin组件', () => {
  it('登录成功后跳转到/info路由', async () => {
    const wrapper = mount(TroubledLogin, {
      global: {
        plugins: [router]
      }
    })

    // 触发按钮点击，await确保点击事件的异步逻辑执行
    await wrapper.find('button').trigger('click')
    // 等待路由跳转完成后断言
    await waitFor(() => {
      expect(router.currentRoute.value.path).toBe('/info')
    })
  })
})

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