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

Тестирование маршрутизации

Маршруты — это "костяк" любого SPA (Single Page Application). Если маршрут не ведёт туда, куда ожидалось, пользователи буквально теряются. Сегодня наша цель — разобраться, как тестировать маршруты, чтобы убедиться, что пользователи получают доступ только к нужным страницам.

Настройка маршрутов в тестируемом приложении

Если вам покажется, что мы немного ускорились, то ничего страшного — мы опираемся на лекции о маршрутизации. Допустим, у нас уже есть приложение с react-router-dom и базовые маршруты.

Создадим простое приложение с двумя страницами: "Главная" и "Контакты". Откройте ваш проект и добавьте следующие компоненты:

Компоненты страниц

// Home.tsx
import React from 'react';

export const Home: React.FC = () => <div>Это главная страница</div>;

// Contact.tsx
import React from 'react';

export const Contact: React.FC = () => <div>Это страница контактов</div>;

Настройка маршрутов

Теперь опишем маршруты в приложении:

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Home } from './Home';
import { Contact } from './Contact';

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

Убедитесь, что приложение работает. Можете открыть браузер и проверить, что по адресу / отобразится "Это главная страница", а по /contact — "Это страница контактов".

Написание тестов для маршрутов

Пришло время проверить эти маршруты в действии. Создадим базовый тест для проверки работоспособности маршрутов.

Тест маршрутов

// cypress/e2e/routes.cy.js
describe('Маршруты приложения', () => {
  it('должен показывать Главную страницу по маршруту "/"', () => {
    cy.visit('/'); // открываем маршрут "/"
    cy.contains('Это главная страница'); // проверяем текст
  });

  it('должен показывать страницу Контактов по маршруту "/contact"', () => {
    cy.visit('/contact'); // открываем маршрут "/contact"
    cy.contains('Это страница контактов'); // проверяем текст
  });
});

Выполнение тестов

Введите команду npx cypress open, чтобы запустить Cypress. Выберите файл теста из списка. Наслаждайтесь: Cypress откроет браузер и выполнит тесты. Если всё работает как надо, оба теста должны пройти.

Работа с динамическими и вложенными маршрутами

Часто маршруты становятся сложнее, например, динамическими или вложенными. Рассмотрим тестирование таких случаев.

Динамические маршруты

Добавим динамический маршрут для страницы пользователя:

// User.tsx
import React from 'react';
import { useParams } from 'react-router-dom';

export const User: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  return <div>Профиль пользователя с ID: {id}</div>;
};

Добавим маршрут в App.tsx:

<Route path="/user/:id" element={<User />} />

Теперь страница будет доступна по адресу /user/1, где 1 — это параметр id.

Тестируем:

describe('Динамические маршруты', () => {
  it('должен показывать страницу пользователя с заданным ID', () => {
    const userId = '42'; // предположим, ID = 42
    cy.visit(`/user/${userId}`);
    cy.contains(`Профиль пользователя с ID: ${userId}`);
  });
});

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

Вложенные маршруты

Вложенные маршруты используются при более сложной навигации. Например, если у нас есть раздел "Учетные записи" с подстраницами, такими как "Пользователи" и "Настройки".

Добавим вложенные маршруты:

// Account.tsx
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

export const Account: React.FC = () => (
  <div>
    <h1>Учетные записи</h1>
    <nav>
      <Link to="users">Пользователи</Link>
        <Link to="settings">Настройки</Link>
    </nav>
    <Outlet />
  </div>
);

// Users.tsx
export const Users: React.FC = () => <div>Это страница пользователей</div>;

// Settings.tsx
export const Settings: React.FC = () => <div>Это страница настроек</div>;

Добавьте вложенные маршруты в приложении:

<Route path="/account" element={<Account />}>
  <Route path="users" element={<Users />} />
  <Route path="settings" element={<Settings />} />
</Route>

Теперь /account/users ведёт к "Пользователям", а /account/settings — к "Настройкам".

Проверим правильность вложенной навигации:

describe('Вложенные маршруты', () => {
  it('должен отображать правильный контент для вложенных маршрутов', () => {
    cy.visit('/account/users'); // проверяем route users
    cy.contains('Это страница пользователей');

    cy.visit('/account/settings'); // проверяем route settings
    cy.contains('Это страница настроек');
  });
});

Решение проблем и отладка маршрутов

Иногда тесты маршрутов работают некорректно. Например, вы можете забыть настроить базовый basename для маршрутов в приложении, если ваше приложение размещено не на корневом домене. Это легко проверить, добавив basename в Router:

<Router basename="/my-app">
  {/* ваши маршруты */}
</Router>

Если тесты падают из-за редиректов, убедитесь, что используете верный метод проверки. Например, вместо cy.url() для проверки маршрута можно использовать cy.location('pathname').

Также будьте внимательны при тестировании динамических или вложенных маршрутов: в них легко запутаться. Используйте комментарии и структуры данных для описания маршрутов.