**Подход 1: Мок route/router (unit-тесты):** ```typescript import { describe, it, expect, vi } from 'vitest' import { mount } from '@vue/test-utils' import BreadCrumbs from '../BreadCrumbs.vue' describe('BreadCrumbs', () => { it('отображает текущий путь', () => { const wrapper = mount(BreadCrumbs, { global: { mocks: { $route: { path: '/users/123/edit', params: { id: '123' }, name: 'user-edit', meta: { title: 'Редактирование' }, }, }, stubs: { RouterLink: { template: '', props: ['to'], }, }, }, }) expect(wrapper.text()).toContain('Редактирование') }) it('переходит на главную по клику на логотип', async () => { const push = vi.fn() const wrapper = mount(BreadCrumbs, { global: { mocks: { $route: { path: '/users', params: {} }, $router: { push }, }, stubs: { RouterLink: true }, }, }) await wrapper.find('[data-testid="logo"]').trigger('click') expect(push).toHaveBeenCalledWith({ name: 'home' }) }) }) ``` **Подход 2: Реальный router (интеграционные тесты):** ```typescript import { describe, it, expect } from 'vitest' import { mount, flushPromises } from '@vue/test-utils' import { createRouter, createMemoryHistory } from 'vue-router' import App from '@/App.vue' import Home from '@/pages/Home.vue' import UserList from '@/pages/UserList.vue' import UserDetail from '@/pages/UserDetail.vue' function createTestRouter() { return createRouter({ history: createMemoryHistory(), // Не нужен реальный browser history routes: [ { path: '/', name: 'home', component: Home }, { path: '/users', name: 'users', component: UserList }, { path: '/users/:id', name: 'user-detail', component: UserDetail }, ], }) } describe('App Navigation', () => { it('переходит на страницу пользователей', async () => { const router = createTestRouter() router.push('/') // Начинаем с главной await router.isReady() const wrapper = mount(App, { global: { plugins: [router], }, }) // Кликаем по ссылке навигации await wrapper.find('[data-testid="nav-users"]').trigger('click') await flushPromises() expect(router.currentRoute.value.name).toBe('users') expect(wrapper.findComponent(UserList).exists()).toBe(true) }) it('отображает детали пользователя по ID', async () => { const router = createTestRouter() router.push('/users/42') await router.isReady() const wrapper = mount(App, { global: { plugins: [router] }, }) await flushPromises() expect(wrapper.findComponent(UserDetail).exists()).toBe(true) }) }) ``` **Компонент с useRoute / useRouter (Composition API):** ```vue ``` ```typescript // Тест — useRoute/useRouter работают через реальный router describe('UserDetail', () => { it('извлекает userId из route params', async () => { const router = createTestRouter() router.push('/users/42') await router.isReady() const wrapper = mount(UserDetail, { global: { plugins: [router] }, }) expect(wrapper.find('[data-testid="user-id"]').text()).toBe('42') }) it('redirect после удаления', async () => { vi.mocked(api.deleteUser).mockResolvedValue(undefined) const router = createTestRouter() router.push('/users/42') await router.isReady() const pushSpy = vi.spyOn(router, 'push') const wrapper = mount(UserDetail, { global: { plugins: [router] }, }) await wrapper.find('[data-testid="delete"]').trigger('click') await flushPromises() expect(pushSpy).toHaveBeenCalledWith({ name: 'users' }) }) }) ``` **Navigation guards в тестах:** ```typescript describe('Auth guard', () => { it('redirect на login для неавторизованных', async () => { const router = createRouter({ history: createMemoryHistory(), routes: [ { path: '/', component: Home }, { path: '/login', name: 'login', component: Login }, { path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { requiresAuth: true }, }, ], }) // Глобальный guard router.beforeEach((to) => { if (to.meta.requiresAuth && !isAuthenticated.value) { return { name: 'login', query: { redirect: to.fullPath } } } }) isAuthenticated.value = false router.push('/dashboard') await router.isReady() expect(router.currentRoute.value.name).toBe('login') expect(router.currentRoute.value.query.redirect).toBe('/dashboard') }) }) ``` --- ## 📌 Реальные кейсы 🔹 **Фабрика роутера для тестов:** ```typescript // tests/helpers/createTestRouter.ts export function createTestRouter(initialRoute = '/') { const router = createRouter({ history: createMemoryHistory(initialRoute), routes: [ // Минимальный набор для тестов { path: '/', component: { template: '

Home

' } }, { path: '/login', name: 'login', component: { template: '

' } }, { path: '/:pathMatch(.*)*', component: { template: '

404

' } }, ], }) return router } // Использование const router = createTestRouter('/users/1') await router.isReady() ``` --- ## Частые ошибки ❌ Забывать `await router.isReady()`: ```typescript const router = createTestRouter() router.push('/users') // Mount без isReady — route ещё не разрешён! const wrapper = mount(App, { global: { plugins: [router] } }) ``` ✅ Всегда жди: ```typescript const router = createTestRouter() router.push('/users') await router.isReady() const wrapper = mount(App, { global: { plugins: [router] } }) ``` --- ❌ Стабить RouterLink как `true` и потом искать по нему: ```typescript global: { stubs: { RouterLink: true } } // Рендерится как — не кликабельно await wrapper.find('a').trigger('click') // Нет — стаб не рендерит ``` ✅ Кастомный стаб или реальный роутер: ```typescript // Кастомный стаб stubs: { RouterLink: { template: '', props: ['to'], }, } // Или реальный роутер — без стабов global: { plugins: [router] } ``` --- ## Резюме | Подход | Когда | |---|---| | `global.mocks.$route` | Unit-тест, нужны только params/query | | `global.mocks.$router` | Unit-тест, проверка вызова push/replace | | `createRouter + createMemoryHistory` | Интеграция, guards, реальная навигация | | Stub RouterLink | Unit-тест, не нужна навигация | | Реальный router plugin | Тестируешь навигацию, guards, RouterView | 🔑 `createMemoryHistory` для тестов — не нужен browser API. Всегда `await router.isReady()`. Мок `$route/$router` для юнитов, реальный роутер для интеграции. ---

Как тестировать компоненты с Vue Router?