router.push could be a simple mock functions by default?

[cexbrayat]

What problem is this solving

For a component doing a navigation with router.push({ name: 'home' }); on an action, our associated unit test usually does a simple assertion like the following:

const mockRouter = createRouter({ history: createWebHistory(), routes: [] });
jest.spyOn(mockRouter, 'push').mockResolvedValue();
const wrapper = mount(App, {   global: { plugins: [mockRouter] } });
// do the action
expect(mockRouter.push).toHaveBeenCalledWith({ name: 'home' });

Using vue-router-mock, we can simplify the test a bit by using createRouterMock:

// do the action
expect(getRouter().push).toHaveBeenCalledWith({ name: 'home' });

but the mock router created tries to really resolve the navigation and throws:

Error: Uncaught [Error: No match for {"name":"home","params":{}}]

Proposed solution

Would it be possible to have a simpler router mock that just have mock functions by default?
Most use cases would probably not need a real navigation to be resolved and triggered.
Or maybe that could be an option?

Describe alternatives you've considered

It's of course possible to spy on getRouter().push but I feel that this should be the default.

[posva]

Most use cases would probably not need a real navigation to be resolved and triggered.

I disagree with this one. I often need query params updated on the url.

What if we could by default ignore named route locations so query params and hash are still populated? Meaning that the vue router mock push method calls internally resolve to check if it's possible to navigate to the location and if it isn't strips out the name

[cexbrayat]

I disagree with this one. I often need query params updated on the URL.

Can you give me an example, I'm not sure I understand what you mean?
If a component navigates to a route with some params, couldn't we just check if router.push was called with the right name or path or params and fake the navigation?

[posva]

An example is a search page with search params in url as query params, the params are used in the search but are an implementation detail and should not get in the way of testing the search component.

[cexbrayat]

Do you mean when you test the search component? In that case, wouldn't simple utils like setQuery() be enough to set the context, instead of triggering a real navigation?

Even if I'm misunderstanding your use-case, wouldn't most unit tests be simple mount(Something) and check if router.push was properly called (without the hassle of mocking the next component dependencies)?

[posva]

The push is done internally. The test clicks on the button to search

[cexbrayat]

Ok so let's go back to what you were proposing

What if we could by default ignore named route locations so query params and hash are still populated? Meaning that the vue router mock push method calls internally resolve to check if it's possible to navigate to the location and if it isn't strips out the name

Sounds good to me. The resolve phase could even be skipped if the mock router has been created with no routes?

[posva]

It shouldn't be skipped because it normalizes the route location and also to simulate how the router changes the current route by affecting the whole route also, and this should be respected because it won't trigger the same watchers, making a test fail while the actual code works

[cexbrayat]

I followed your idea and opened #53

I tried a patched version in our projects, and it does simplify our tests quite a bit 👍