Как тестировать 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');
});