如何使用 jest 在 vue 3 中对 onBeforeRouteUpdate 进行单元测试

Question

我有一个例子，全局组件使用 Vue 路由器中的

onBeforeRouteUpdate

，

这是代码

setup() {

    const doSomething = (): boolean => {
      if (active.value) {
        emit('close')
        return false
      }

      return true
    }

    onBeforeRouteLeave(doSomething)
}
 

我尝试像这样模拟生命周期路由器

jest.mock('vue-router', () => ({
  onBeforeRouteLeave: jest.fn(),
  onBeforeRouteUpdate: jest.fn(),
}))

但是

doSomething

上的函数没有测试/未覆盖，如何更正以要测试的函数

doSomething

来测试onBeforeRouteLeave？

Answer 1

我不太了解如何测试您的功能的具体细节，但以下是如何让路线守卫适当地触发，以便您可以测试您的实际功能

  it('tests onBeforeRouteLeave', () => {

    mount(yourComponent)

    // Capture the `onBeforeRouteLeave` guard and call it manually
    expect(onBeforeRouteLeave).toHaveBeenCalled()

    const guardCallback = onBeforeRouteLeave.mock.calls[0][0]
    guardCallback(to, {}, next)


    // Test your function here

    // Ensure `next()` was called
    expect(next).toHaveBeenCalled()
  })