在 vue 组件上测试导航守卫“beforeRouteLeave”

Question

我目前坚持使用 jest 对 vue 组件的路由行为进行单元测试。离开组件时，Vue-router 的“beforeRouteLeave”导航守卫会运行一些逻辑。这个守卫在我在生产中运行的应用程序中被调用，但在我尝试测试它时不会被调用。

我使用 jest 作为测试框架，使用 vue-test-utils 挂载我的组件并使用 vue-router 设置本地 Vue 实例。

在这里你可以找到一个最小的工作示例（在 'src/components/HelloWorld.spec' 中测试）：

https://codesandbox.io/s/72536ojvp6?module=%2Fsrc%2Fcomponents%2FHelloWorld.spec.js

为什么不调用路由器挂钩，我该如何使其工作？提前致谢！

Answer 1

对我来说，以下代码可以很好地测试 vue 路由器导航防护。

const beforeRouteUpdate = wrapper.vm.$options.beforeRouteUpdate[0];
let nextFun = jest.fn();

// in place wrapper.vm you can send any object you want bcz when we call beforeRouteUpdate it looses this context

beforeRouteUpdate.call(wrapper.vm , "toObj", "fromObj", nextFun); 

beforeRouteEnter 路由导航守卫 github