Test navigation guard 'beforeRouteLeave' on vue component

Question

I am currently stuck on unit testing the routing behavior of a vue component with jest. When leaving the component, the 'beforeRouteLeave' navigation guard of Vue-router runs some logic. This guard gets called in my application running in production, but won't gets called when I try to test it.

I use jest as a testing framework and vue-test-utils to mount my component and set up a local Vue instance with vue-router.

Here you can find a minimal working example (test in 'src/components/HelloWorld.spec'):

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

Why isn't the router hook called and how can I make it work? Thanks in advance!

Try to await wrapper.vm.$nextTick(). Maybe that helps. Its either that or the page was not rendered by the router. — Dobromir Hristov, Jul 17 '18 at 12:26
@DobromirHristov thx for the reply! Tried to wait for next tick but it did not help. I even mounted the component with 'sync: false'. — mightyI, Jul 17 '18 at 13:55
You sure the component is rendered by the router? Try to debug the current route component and name. — Dobromir Hristov, Jul 17 '18 at 14:45

score 1 · Answer 1 · answered Apr 16 '20 at 13:47

For me the following code worked fine for testing vue router navigation guards.

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

Test navigation guard 'beforeRouteLeave' on vue component

1 Answers1