Vue单元测试：onBeforeRouteUpdate钩子未触发的问题解决

问题原因 #

直接mount目标组件时，组件并未被纳入Vue Router的路由视图体系（即未通过<router-view>渲染），导致Vue Router无法识别该组件与当前路由记录的关联，组件级路由守卫onBeforeRouteUpdate无法完成注册，因此不会在路由参数变化时触发，同时出现No active route record was found when calling 'onBeforeRouteUpdate()'的提示。

解决方案 #

修改单元测试代码，通过包含<router-view>的测试组件渲染目标组件，确保组件处于Vue Router的路由上下文环境中，具体调整如下：

1. 调整组件挂载逻辑 #

创建包含<router-view>的临时测试组件，挂载该组件以确保目标组件处于路由上下文内：

test('setFlags() is called when transferring from a to b', async () => {
  const pinia = createPinia()
  setActivePinia(pinia)
  const store = useMyStore()
  store.setFlags = vi.fn()
  
  const router = createRouter({
    history: createMemoryHistory(),
    routes
  })

  // 初始路由跳转
  router.push('/test/a')
  await router.isReady()

  // 创建包含router-view的测试容器组件
  const RouteWrapper = {
    template: '<router-view />'
  }

  // 挂载容器组件，目标组件会通过router-view自动渲染
  mount(RouteWrapper, {
    global: {
      plugins: [router, pinia]
    }
  })

  // 模拟路由参数变化
  router.push('/test/b')
  await router.isReady()
  await flushPromises()

  expect(store.setFlags).toHaveBeenCalledOnce()
})

2. 额外优化建议 #

• 确认路由配置中/test/:id的对应组件为TestComponent，否则<router-view>无法正确渲染目标组件。
• 简化路由守卫逻辑：Vue 3中路由守卫无需强制调用next()，可直接省略以默认允许导航，调整后代码更简洁：

onBeforeRouteUpdate((to, from) => {
  console.log('calling onBeforeRouteUpdate')
  if (to.name === from.name) {
    init()
  }
})

完成上述修改后，单元测试中的onBeforeRouteUpdate钩子即可正常触发，setFlags的调用断言也会通过。

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