posva / vue-router-mock

🧪 Easily mock routing interactions in your Vue apps
MIT License
201 stars 7 forks source link

In-Component guard ignored when initializing mock with routes #215

Closed tobi-fis closed 1 year ago

tobi-fis commented 1 year ago

Hey, I am testing routing on a component (composition API) which uses an onBeforeRouteUpdate navigation guard. When I initialize the router mock like this:

const router = createRouterMock({
    runInComponentGuards: true,
});

and run a test like this:

it('checks beforeRouteUpdate', async () => {
        const router = getRouter();
        await router.push('/test1/1');
        const wrapper = createWrapper();
        await wrapper.router.push('/test2/2');
        ...
    });

I can see a breakpoint in my onBeforeRouteUpdate being hit as expected.

But if I initialize the mock with routes:

const router = createRouterMock({
    runInComponentGuards: true,
    routes: [
        { name: 'test1', path: '/test1/:id', component: MockComponent},
        { name: 'test2', path: '/test2/:id', component: MockComponent},
    ],
});

the breakpoint in the guard never hits. I need to test behavior of the guard depending on the :idparam, and from my understanding the param will not be recognized if the routes array is empty. When I check router.currentRoute in the second example, I can see that the second route is correctly loaded with the expected :id param.

Am I doing something wrong? Or is there another way to test the in-component guard behavior with vue 3 / composition API?

Thank you in advance.

Versions: vitest: 0.33.0 vue: 3.3.4 vue-router-mock: 1.0.0

posva commented 1 year ago

Before route update implies a route that updates rather than a new route (you have two routes in your array). You can find more about this in vue router docs, navigation guards