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

1. React Testing Library (RTL)

Одна из самых популярных библиотек для тестирования компонентов. Подход RTL основан на тестировании компонентов так, как с ними взаимодействует пользователь, а не реализация.

Установка:

npm install @testing-library/react @testing-library/jest-dom

Пример теста:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
test('renders button and reacts to click', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
const button = screen.getByText('Click me');
fireEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});

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

• Использует DOM API (например getByText, getByRole), приближая тесты к пользовательскому опыту.

• Можно использовать user-event для более реалистичного взаимодействия, имитируя действия пользователя (click, type, hover и т.д.).

2. Jest

Основной тест-раннер для большинства React-проектов. Используется для:

• запуска тестов;

• создания снапшотов;

• мокинга модулей;

• тестирования утилит.

Пример:

test('simple math', () => {
expect(1 + 1).toBe(2);
});

Jest можно использовать как отдельно, так и в связке с RTL.

3. Snapshot Testing

Позволяет зафиксировать JSX-структуру компонента в момент времени и автоматически сравнивать при последующих запусках тестов.

import { render } from '@testing-library/react';
import Header from './Header';
test('snapshot test', () => {
const { asFragment } = render(<Header />);
expect(asFragment()).toMatchSnapshot();
});

Если структура компонента изменилась, Jest сообщит о расхождении.

4. End-to-End (E2E) тестирование

Для полноценной проверки взаимодействия компонентов и страниц. Используются такие инструменты:

Cypress:

• Тестирует приложение в браузере, взаимодействуя с элементами, как пользователь.

• Поддерживает скриншоты и запись видео.

npm install cypress
// cypress/e2e/sample.cy.js
describe('Home page', () => {
it('loads and shows title', () => {
cy.visit('/');
cy.contains('Welcome to My App');
});
});

Playwright:

• Современный аналог Cypress с хорошей скоростью и поддержкой множественных браузеров.

npm install -D @playwright/test

5. Тестирование хуков

Для unit-тестирования кастомных хуков используется библиотека @testing-library/react-hooks.

npm install @testing-library/react-hooks

Пример:

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';
test('should increment counter', () => {
const { result } = renderHook(() => useCounter());
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});

6. Mocking: мок API, контексты, навигацию

Для изоляции компонентов:

• jest.fn() — для создания поддельных функций;

• jest.mock() — для подмены модулей;

• msw (Mock Service Worker) — для имитации сетевых запросов.

Пример мок запроса:

import { rest } from 'msw';
import { setupServer } from 'msw/node';
const server = setupServer(
rest.get('/api/user', (req, res, ctx) => {
return res(ctx.json({ name: 'Alice' }));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

7. Тестирование с Redux, Context, Router

Компоненты, обернутые в провайдеры, требуют создания обертки для теста:

const renderWithProviders = (ui) => {
return render(
<Provider store={store}>
<BrowserRouter>
{ui}
</BrowserRouter>
</Provider>
);
};

Такой подход упрощает тестирование обернутых компонентов.

8. Code Coverage

Jest позволяет измерить покрытие кода:

npm test -- --coverage

Показывает, какие строки, функции и ветки кода покрыты тестами, а какие нет.

9. Полезные библиотеки и тулзы:

• jest-dom — расширяет expect новыми матчерами (toBeInTheDocument, toHaveTextContent).

• user-event — для имитации поведения пользователя.

• msw — для mock API.

• cypress-axe — для тестирования доступности.

• storybook — визуальное тестирование компонентов, особенно полезно при совместной работе дизайнеров и разработчиков.

10. Советы по написанию хороших тестов:

• Тестируй поведение, а не реализацию.

• Держи тесты изолированными и независимыми.

• Избегай чрезмерного использования снапшотов.

• Обеспечивай читаемость: имена тестов должны отражать сценарии.

• Учитывай крайние случаи: пустые значения, ошибки, необычные данные.