vue-router-mock

import { VueRouterMock, createRouterMock, injectRouterMock } from 'vue-router-mock'; import { config } from '@vue/test-utils'; import { mount } from '@vue/test-utils'; import { defineComponent } from 'vue'; // Create a simple component to test const MyComponent = defineComponent({ template: ` <div> <p>Current path: {{ $route.path }}</p> <button @click="$router.push('/about')">Go to About</button> </div> ` }); // Create one router per test file/suite setup const router = createRouterMock(); beforeEach(() => { router.reset(); // Reset the router state before each test injectRouterMock(router); // Inject the mock router globally for the test }); // Add properties to the @vue/test-utils wrapper (required for `wrapper.router`) config.plugins.VueWrapper.install(VueRouterMock); describe('MyComponent with vue-router-mock', () => { it('should display the current path and navigate', async () => { const wrapper = mount(MyComponent); // Initial state expect(wrapper.find('p').text()).toContain('/'); expect(wrapper.router.path).toBe('/'); // Simulate navigation await wrapper.find('button').trigger('click'); // Assertions on the mock router expect(wrapper.router.push).toHaveBeenCalledTimes(1); expect(wrapper.router.push).toHaveBeenCalledWith('/about'); // Assertions on component state after navigation (if it reacts to route change) // Note: for reactive updates, you might need await wrapper.vm.$nextTick() // depending on how the component consumes the route changes expect(wrapper.find('p').text()).toContain('/about'); }); });