Как тестировать routing приложения?

Поиск

Тестирование маршрутизации (routing) в React-приложении важно для обеспечения правильного перехода между страницами и отображения соответствующих компонентов. Для тестирования маршрутизации можно использовать библиотеку React Router в сочетании с React Testing Library и Jest.

Основные аспекты тестирования routing:

Проверка правильности рендеринга компонентов: Убедитесь, что при переходе по определенному маршруту рендерится правильный компонент.
Проверка переходов между маршрутами: Убедитесь, что переходы между маршрутами работают правильно.
Проверка параметров маршрута: Убедитесь, что параметры маршрута (например, динамические маршруты) передаются и обрабатываются правильно.

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

React Router: Библиотека для маршрутизации в React.
React Testing Library: Утилита для тестирования компонентов React.
Jest: Фреймворк для тестирования.
MemoryRouter: Компонент из React Router, который можно использовать для тестирования маршрутизации в изолированной среде.

Пример файла с маршрутами App.js:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import User from "./User";
 
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
};
 
export default App;

Пример тестового файла App.test.js:

import { render, screen } from "@testing-library/react";
import { MemoryRouter, Route } from "react-router-dom";
import App from "./App";
import Home from "./Home";
import About from "./About";
import User from "./User";
 
// Имитация компонентов Home, About и User
jest.mock("./Home", () => () => <div data-testid="home">Home</div>);
jest.mock("./About", () => () => <div data-testid="about">About</div>);
jest.mock("./User", () => ({ match }) => (
  <div data-testid="user">User {match.params.id}</div>
));
 
test("renders Home component on / route", () => {
  render(
    <MemoryRouter initialEntries={["/"]}>
      <App />
    </MemoryRouter>,
  );
 
  expect(screen.getByTestId("home")).toBeInTheDocument();
});
 
test("renders About component on /about route", () => {
  render(
    <MemoryRouter initialEntries={["/about"]}>
      <App />
    </MemoryRouter>,
  );
 
  expect(screen.getByTestId("about")).toBeInTheDocument();
});
 
test("renders User component on /user/:id route", () => {
  render(
    <MemoryRouter initialEntries={["/user/123"]}>
      <App />
    </MemoryRouter>,
  );
 
  expect(screen.getByTestId("user")).toHaveTextContent("User 123");
});