Тестирование редиректов

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

Основные подходы к тестированию редиректов

1. Юнит-тесты редиректов

Редиректы можно протестировать на уровне конфигурации маршрутов без необходимости рендерить весь интерфейс. Для этого используется метод navigate, предоставляемый TanStack Router, в сочетании с моками состояния или контекста.

Пример юнит-теста редиректа:

import { createMemoryRouter } from '@tanstack/router';
import { routes } from './routes';

test('редирект на /login при отсутствии авторизации', () => {
  const router = createMemoryRouter({
    routes,
    initialEntries: ['/dashboard'],
  });

  router.navigate('/dashboard');

  expect(router.state.location.pathname).toBe('/login');
});

Ключевые моменты:

  • Использование createMemoryRouter позволяет тестировать маршрутизацию без реального браузера.
  • initialEntries задаёт исходный путь.
  • Проверка router.state.location.pathname подтверждает, что редирект произошёл корректно.

2. Тестирование асинхронных редиректов

Редиректы часто зависят от асинхронных данных, например, состояния загрузки пользователя или результатов API. В таких случаях необходимо использовать асинхронные проверки.

Пример асинхронного редиректа:

test('редирект после проверки прав доступа', async () => {
  const router = createMemoryRouter({ routes, initialEntries: ['/admin'] });

  await router.navigate('/admin');

  await router.load(); // ожидание асинхронной загрузки

  expect(router.state.location.pathname).toBe('/login');
});

Особенности:

  • Метод router.load() инициирует обработку всех асинхронных хуков маршрута.
  • Проверка должна происходить после завершения всех промисов.

3. Тестирование циклических редиректов

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

Пример теста на циклический редирект:

test('обнаружение циклического редиректа', () => {
  const router = createMemoryRouter({ routes: cyclicRoutes, initialEntries: ['/a'] });

  expect(() => router.navigate('/a')).toThrow(/Infinite redirect detected/);
});

Важные моменты:

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

4. Интеграционное тестирование с компонентами

Для полноценного тестирования поведения приложения редиректы проверяются совместно с рендерингом компонентов. В таких тестах используется библиотека @testing-library/react для имитации навигации и проверки отображаемого UI.

Пример интеграционного теста:

import { render, screen } from '@testing-library/react';
import { RouterProvider } from '@tanstack/router';
import { router } from './router';

test('редирект на /login при неавторизованном доступе', async () => {
  render(<RouterProvider router={router} />);
  
  router.navigate('/dashboard');
  await router.load();

  expect(screen.getByText(/логин/i)).toBeInTheDocument();
});

Особенности интеграционных тестов:

  • Проверка редиректа через DOM подтверждает корректность визуального поведения.
  • Асинхронная загрузка маршрутов учитывает данные, необходимые для решения о редиректе.

5. Использование моков состояния и контекста

Редиректы часто зависят от состояния приложения: авторизация, роли пользователя, флаги функций. Для тестирования такие состояния следует мock-ить.

Пример мокирования авторизации:

const authMock = { isLoggedIn: false };

const router = createMemoryRouter({
  routes: [
    {
      path: '/dashboard',
      loader: () => {
        if (!authMock.isLoggedIn) {
          return { redirect: '/login' };
        }
        return {};
      },
    },
    { path: '/login' },
  ],
});

test('редирект при отсутствии авторизации', () => {
  router.navigate('/dashboard');
  expect(router.state.location.pathname).toBe('/login');
});

Рекомендации по надежному тестированию редиректов

  1. Разделять юнит и интеграционные тесты Юнит-тесты проверяют логику редиректов без рендеринга компонентов, интеграционные — проверяют полный путь навигации вместе с UI.

  2. Проверять асинхронные редиректы Любой редирект, зависящий от данных API, должен тестироваться с ожиданием завершения загрузки данных.

  3. Ограничивать циклы редиректов Убедиться, что тесты корректно обрабатывают бесконечные перенаправления и ошибки.

  4. Использовать мокирование состояния приложения Это позволяет тестировать разные сценарии авторизации, ролей и feature-флагов.

  5. Проверять конечный путь маршрута и состояние интерфейса Важно убедиться, что редирект привел не только к изменению пути, но и к корректному отображению UI.

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

Оглавление