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

Тестирование React-приложения строится пирамидой: много юнит- и компонентных тестов, меньше интеграционных, немного e2e. Современный подход: тестировать поведение, а не реализацию.

Инструменты

• Vitest / Jest — раннер, ассерты, моки.
• React Testing Library (RTL) — рендер компонентов и запросы «как пользователь»: по ролям, тексту, лейблам.
• user-event — реалистичные действия пользователя.
• MSW (Mock Service Worker) — мок API на уровне сети, а не функций.
• Playwright / Cypress — e2e в настоящем браузере.

Компонентные тесты (основа)

test('добавляет товар в корзину', async () => {
  render(<ProductCard product={product} />);

  await userEvent.click(screen.getByRole('button', { name: /в корзину/i }));

  expect(screen.getByText(/добавлено/i)).toBeInTheDocument();
});

Принципы RTL:

• запросы по доступным признакам (getByRole, getByLabelText) — тест заодно проверяет доступность;
• не тестировать state и внутренние методы — только вход (props, действия) и выход (что видит пользователь);
• асинхронность — await findBy..., а не таймеры.

Что тестировать чем

• Чистая логика (утилиты, редьюсеры, селекторы) — обычные юнит-тесты, без рендера.
• Кастомные хуки — renderHook из RTL.
• Компоненты с данными — рендер с провайдерами (обёртка с QueryClient, стором, роутером) + MSW для API.
• Критические пользовательские сценарии (логин, оформление заказа) — e2e Playwright.
• Снапшот-тесты — ограниченно: хрупкие и мало говорят о поведении.

Коротко для собеседования

Стек: Vitest/Jest + React Testing Library + user-event + MSW, e2e — Playwright. Подход: тестировать как пользователь (роли/тексты, а не state и классы), логику выносить в чистые функции и покрывать юнитами, API мокать на уровне сети, e2e — только критические сценарии.