javascript - 在 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

为什么没有调用路由器 Hook ，我怎样才能让它工作？
提前致谢!

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 route navigation guard github