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
– Atom999, Commented Jan 26, 2022 at 19:31

Vanga Kiran Kumar Reddy · Accepted Answer · 2022-07-05 16:50:47Z

1

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('/');
    });

answered Jul 5, 2022 at 16:50

Vanga Kiran Kumar Reddy

1581 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related