E2E-тестирование маршрутов

TanStack Router предоставляет мощный инструмент для организации маршрутов в приложениях на JavaScript. При разработке сложных приложений критически важно не только корректно настроить маршрутизацию, но и обеспечить её работоспособность через E2E-тесты. E2E-тестирование проверяет поведение приложения как целостной системы, включая переходы между маршрутами, обработку параметров и взаимодействие с компонентами.

Настройка окружения для E2E-тестирования

Для полноценного тестирования маршрутов требуется интеграция с фреймворками для E2E-тестирования, такими как Cypress или Playwright. Основная цель — имитировать действия пользователя: клики, ввод данных, переходы по ссылкам и проверки состояния приложения.

Пример базовой настройки с Playwright:

import { test, expect } from '@playwright/test';

test('маршруты приложения', async ({ page }) => {
  await page.goto('http://localhost:3000');
});

Важно убедиться, что приложение запущено в тестовом окружении, чтобы маршруты были доступны и возвращали корректные страницы.

Тестирование статических маршрутов

Статические маршруты — это маршруты без параметров, которые всегда ведут к конкретным компонентам. Проверка таких маршрутов включает:

  1. Навигацию по URL Проверка перехода на нужный путь и загрузки соответствующего компонента.
  2. Рендер компонентов Убедиться, что при посещении маршрута отображается ожидаемый контент.

Пример теста:

test('Главная страница доступна', async ({ page }) => {
  await page.goto('http://localhost:3000/home');
  await expect(page.locator('h1')).toHaveText('Главная страница');
});

Тестирование динамических маршрутов

Динамические маршруты содержат параметры, такие как :id или :slug. TanStack Router позволяет использовать параметризованные маршруты, а E2E-тестирование проверяет корректность подстановки значений и отображения данных.

Пример маршрута: /users/:userId

Тестирование включает:

  1. Передачу параметров через URL
  2. Проверку рендера данных, соответствующих параметру
test('Страница пользователя отображает правильные данные', async ({ page }) => {
  await page.goto('http://localhost:3000/users/42');
  await expect(page.locator('.user-name')).toHaveText('Пользователь 42');
});

Особое внимание уделяется обработке невалидных или отсутствующих параметров. TanStack Router позволяет настроить fallback-компоненты и редиректы, которые также должны проверяться.

Проверка вложенной маршрутизации

TanStack Router поддерживает вложенные маршруты, что позволяет строить сложные интерфейсы с родительскими и дочерними страницами. В E2E-тестах необходимо убедиться, что:

  • Родительский компонент загружается корректно при переходе к дочернему маршруту.
  • Дочерние компоненты отображаются внутри родительского контекста.
  • Breadcrumb и другие элементы навигации корректно реагируют на переходы.

Пример теста для вложенных маршрутов:

test('Дочерний маршрут отображается внутри родителя', async ({ page }) => {
  await page.goto('http://localhost:3000/dashboard/settings');
  await expect(page.locator('h2')).toHaveText('Настройки');
  await expect(page.locator('nav')).toContainText('Dashboard');
});

Тестирование переходов между маршрутами

Переходы через ссылки, кнопки и программную навигацию должны работать без ошибок. TanStack Router предоставляет API для программного перехода через router.navigate. В E2E-тестах проверяется:

  • Переход по ссылке <Link> или <NavLink>.
  • Программная навигация через router.navigate.
  • Корректное обновление URL и состояния компонентов.

Пример:

test('Переход с главной на страницу профиля', async ({ page }) => {
  await page.goto('http://localhost:3000/home');
  await page.click('text=Профиль');
  await expect(page).toHaveURL('http://localhost:3000/profile');
  await expect(page.locator('h1')).toHaveText('Профиль');
});

Обработка ошибок и редиректов

TanStack Router позволяет настраивать редиректы и страницы ошибок. В E2E-тестах важно проверить:

  • Переход на несуществующий маршрут приводит к странице 404.
  • Редиректы выполняются корректно при определённых условиях (например, при отсутствии авторизации).

Пример проверки 404:

test('Несуществующий маршрут ведет на страницу ошибки', async ({ page }) => {
  await page.goto('http://localhost:3000/unknown');
  await expect(page.locator('h1')).toHaveText('Страница не найдена');
});

Советы по организации E2E-тестов маршрутов

  • Изолировать маршруты: тестировать каждый маршрут отдельно для упрощения диагностики.
  • Использовать фикстуры: подготавливать тестовые данные для динамических маршрутов.
  • Проверять состояние приложения: убедиться, что стейт обновляется корректно при навигации.
  • Проверять доступность: элементы управления должны быть интерактивными и видимыми после перехода.

E2E-тестирование маршрутов в TanStack Router обеспечивает уверенность, что приложение работает корректно при реальных пользовательских сценариях. Тесты покрывают статические и динамические маршруты, вложенные маршруты, редиректы и обработку ошибок, что делает приложение стабильным и предсказуемым.

Оглавление