如何在RouteUpdate钩子之前对vue进行单元测试

Question

我有以下 vue 组件，它使用 onBeforeRouteUpdate 钩子在路由参数更改时调用 init() 方法（test/a -> test/b）。

以下 stackblitz 实例显示了使用 npm run test:unit 的输出。 https://stackblitz.com/~/github.com/demiglace0505/sandbox。

<script setup>
const store = useMyStore()

const init = async () => {
  console.log('init call')
  store.setFlags()
}

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

这是单元测试：

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

  // initial screen: a
  router.push('/test/a')
  await router.isReady()

  mount(TestComponent, {
    global: {
      plugins: [router]
    }
  })

  // simulate a router update from a to b
  router.push('/test/b')
  await router.isReady()
  await flushPromises()

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

问题是，onBeforeRouteUpdate() 似乎没有被触发。 console.logs 甚至没有被写入。我还收到以下消息，仅在测试控制台上。

No active route record was found when calling 'onBeforeRouteUpdate()'

但是在浏览器中，应用程序运行正常。

Answer 1

输出表明出了什么问题：

[Vue Router warn]：调用

onBeforeRouteUpdate()

时没有找到活动的路由记录。确保在 的子组件内调用此函数。也许您在 App.vue 内部调用了它？

没有路由器视图，因此路由器不起作用。

应该是：

wrapper = mount(() => h('div', {}, [h(RouterView), h(TestComponent)]), {...});

路线更新时不需要

await router.isReady()

，它负责初始导航。但应该有

await flushPromises()

才能应用路线更新。

如果这是单元测试，则测试方法存在问题，因为它测试多个单元如何协同工作，使其成为集成测试。在正确的单元测试中，

vue-router

模块应该被模拟。