Тестирование роутов в React

Когда мы разрабатываем приложения на React, рутинной, но важной задачей является тестирование. Один из ключевых элементов любого веб-приложения — это маршрутизация (роутинг), которая позволяет пользователям перемещаться между различными страницами. Тестирование роутов помогает убедиться, что переходы между страницами работают корректно, ссылки ведут в нужные места, а компоненты рендерятся в зависимости от URL.

В этой статье я расскажу о своем опыте тестирования роутов в React, объясню, как настроить тесты, и какие инструменты для этого использовать.

Почему важно тестировать роуты?

Роутинг — это основа любого SPA (single-page application), и его корректная работа напрямую влияет на пользовательский опыт. Если роуты работают некорректно, пользователи могут столкнуться с такими проблемами, как:

— Переход по неверным URL.

— Ошибки при обновлении страницы.

— Неверная отрисовка компонентов при изменении маршрута.

Тестирование роутов помогает убедиться, что приложение работает так, как задумано, даже при изменении URL и навигации через разные части интерфейса.

Инструменты для тестирования роутов в React

Для тестирования роутов я использую следующие инструменты:

— Jest: для написания и выполнения тестов.

— React Testing Library: для рендеринга компонентов в тестовой среде.

— React Router: библиотека, которая используется для маршрутизации в React-приложениях. Для тестирования роутов можно использовать его компоненты и утилиты.

Установка необходимых зависимостей

Если у тебя еще не установлены эти библиотеки, начнем с установки необходимых инструментов:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom react-router-dom

Теперь у нас есть все, что нужно для тестирования компонентов с роутингом.

Пример приложения с маршрутизацией

Представим, что у нас есть простое приложение с несколькими страницами: домашняя страница и страница о нас. В приложении используется React Router для маршрутизации между этими страницами.

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Us</h1>;

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

В этом примере:

— Мы создаем маршруты для домашней страницы и страницы о компании.

— Ссылки навигации с помощью компонента Link позволяют пользователю перемещаться между страницами без перезагрузки.

Тестирование роутов

Теперь, когда у нас есть приложение с маршрутизацией, давай посмотрим, как тестировать роуты.

Тест 1: Рендеринг правильной страницы по умолчанию

Во-первых, убедимся, что при первом рендере приложения отображается домашняя страница, так как маршрут по умолчанию («/») должен вести именно туда.

import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

test('renders home page by default', () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );

  // Проверяем, что отобразился текст "Home Page"
  expect(screen.getByText(/Home Page/i)).toBeInTheDocument();
});

Что здесь происходит:

— Мы используем render из React Testing Library для отрисовки приложения в тестовом окружении.

— BrowserRouter нужен для того, чтобы наше приложение знало о маршрутизации.

— screen.getByText проверяет, что элемент с текстом «Home Page» отображается на экране, что означает, что загрузилась домашняя страница.

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

Теперь давай проверим, что при клике на ссылку «About» мы попадаем на страницу о компании.

import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import userEvent from '@testing-library/user-event';
import App from './App';

test('navigates to the about page when link is clicked', () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );

  // Находим ссылку на страницу "About" и кликаем по ней
  const aboutLink = screen.getByText(/About/i);
  userEvent.click(aboutLink);

  // Проверяем, что после клика мы на странице "About Us"
  expect(screen.getByText(/About Us/i)).toBeInTheDocument();
});

Что здесь происходит:

— Мы находим ссылку «About» с помощью screen.getByText и используем userEvent.click, чтобы симулировать клик по ней.

— Затем проверяем, что после клика на экране появился текст «About Us», что подтверждает успешный переход на нужную страницу.

Тест 3: Проверка отсутствующего маршрута (страница 404)

Важно также протестировать поведение приложения на неизвестных маршрутах. Добавим в наше приложение компонент для обработки 404 ошибки и протестируем его.

Обновим компонент App, добавив обработку несуществующих маршрутов:

function NotFound() {
  return <h1>404 Page Not Found</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />  {/* Обработка несуществующих маршрутов */}
      </Routes>
    </Router>
  );
}

Теперь добавим тест:

test('renders 404 page for unknown route', () => {
  const badRoute = '/some/bad/route';

  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );

  // Переходим по несуществующему маршруту
  window.history.pushState({}, 'Test page', badRoute);

  // Проверяем, что отображается сообщение об ошибке 404
  expect(screen.getByText(/404 Page Not Found/i)).toBeInTheDocument();
});

Что здесь происходит:

— Мы вручную изменяем URL с помощью window.history.pushState() на несуществующий маршрут.

— Проверяем, что отобразился компонент NotFound с текстом «404 Page Not Found», что указывает на корректную обработку ошибки.

Заключение

Тестирование роутов в React — важный шаг для обеспечения стабильности работы вашего приложения. С помощью Jest и React Testing Library можно легко тестировать корректное рендеринг страниц, переходы между ними, а также обработку несуществующих маршрутов. Эти тесты помогут предотвратить ошибки на этапе разработки и улучшат общий пользовательский опыт.

Теперь ты знаешь, как эффективно тестировать роуты в React. Если у тебя в приложении есть сложная маршрутизация, не игнорируй тестирование — оно обеспечит уверенность в том, что навигация работает, как задумано.