Vue testing beforeRouteEnter navigationGuard with JEST / Vue-test-utils

Question

i have a component which uses

beforeRouteEnter(to, from, next) {
return next((vm) => {
 
  vm.cacheName = from.name
})

},

it takes previous route name and saves it into current component variable calld - cacheName

how can i test that with JEST? i was trying to

 test('test', async () => {
await wrapper.vm.$options.beforeRouteEnter(null, null, () => {
  return (wrapper.vm.cacheName = 'testname')
})

console.log(wrapper.vm.cacheName)

})

but it doesnt rly cover the test.. i guess i have to mock next function somehow but i just dont know how, please help me :<

Yea, wish there was an answer here :) You ever find a solution? I am doing I am doing what you are doing by setting `vm.cacheName = from.name` but then in the component's created() function I check `this.cacheName` and it's always null. So beforeRouteEnter is never called.. and any mocking of beforeRouterEnter() never works after I make the `wrapper` because my created() function fails when doing `wrapper = mount( Component, ...` — Atom999, Jan 26 '22 at 19:31

score 1 · Answer 1 · answered Jul 05 '22 at 16:50

Testing beforeRouteEnter: I was trying with jest, In my use case, it worked with the below code.

vue-testing-handbook Reference Link

it('should test beforeRouteEnter', async () => {
        const wrapper = shallowMount(Component, {
            stubs,
            localVue,
            store,
            router,
            i18n,
        });
        const next = jest.fn();
        Component.beforeRouteEnter.call(wrapper.vm, undefined, undefined, next);
        await wrapper.vm.$nextTick();

        expect(next).toHaveBeenCalledWith('/');
    });

Vue testing beforeRouteEnter navigationGuard with JEST / Vue-test-utils

1 Answers1