Этап 9 из 12 · ≈ 4 ч

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

Основа с Junior

Testing Library, тесты хуков и сквозные сценарии.

Компоненты тестируют как пользователь: найти кнопку по роли и подписи, нажать, проверить видимый результат. Внутреннее состояние и число рендеров не проверяют.

render(<Counter />);
await userEvent.click(screen.getByRole("button", { name: /нажато/i }));
expect(screen.getByRole("button")).toHaveTextContent("Нажато 1");

Что важно знать

  • Стек: Vitest (или Jest) + React Testing Library + user-event.
  • Сеть — через MSW: те же обработчики работают в тестах и в разработке.
  • Компоненты с провайдерами (роутер, кэш запросов, тема) — общая функция renderWithProviders.
  • Хуки — renderHook.
  • Сквозные сценарии — Playwright.

Темы этапа

Критерии освоения

Junior ≈ 4 ч

  • Тестирует компоненты через Testing Library и user-event

Практика. Покрыть тестами 3 компонента приложения.

Middle ≈ 4 ч

  • Тестирует компоненты с провайдерами и сетью через MSW, хуки — через renderHook

Практика. Сделать общую функцию renderWithProviders и покрыть тестами страницу с загрузкой данных.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как тестировать React-компоненты через Testing Library и user-event?Junior

Testing Library проверяет компонент как пользователь: рендерит его, ищет элементы по роли, подписи, тексту, а не по классам и внутреннему состоянию. user-event имитирует реальные действия (клик, ввод с клавиатуры, Tab) с правильной последовательностью…

Полный разбор
Чем отличаются getBy, queryBy и findBy в Testing Library?Junior

getBy… — элемент должен быть сейчас, иначе ошибка. queryBy… — возвращает null, если элемента нет: для проверки отсутствия (expect(queryByText("Ошибка")).not.toBeInTheDocument()). findBy… — асинхронно ждёт появления (промис, по умолчанию до 1 секунды): для…

Полный разбор
Что тестировать во фронтенд-приложении на React?Junior

Тестировать поведение, важное пользователю: что показывается при разных данных (пусто, ошибка, загрузка, список), что происходит после действий (отправка формы, фильтр, удаление), валидацию и граничные случаи. Чистую логику (форматирование, расчёты) …

Полный разбор
Как тестировать компоненты, которые ходят в сеть и используют провайдеры?Middle

MSW (Mock Service Worker) перехватывает запросы на уровне сети и отвечает заданными данными: компонент работает с настоящим fetch и клиентом, а тест управляет ответами — успех, ошибка 500, задержка. Обработчики общие для тестов, Storybook и локальной…

Полный разбор
Как тестировать пользовательские хуки?Middle

Хук нельзя вызвать вне компонента, поэтому используют renderHook из Testing Library: он рендерит служебный компонент и отдаёт result.current — текущее возвращаемое значение. Действия, меняющие состояние, оборачивают в act; асинхронные результаты ждут через…

Полный разбор
Как писать юнит-тесты на фронтенде (Vitest, Jest)?Junior

Юнит-тесты проверяют логику без браузера: функции форматирования, расчёты, валидацию, редьюсеры, хуки. Vitest (быстрый, совместим с Vite) и Jest — похожий API: describe, it/test, expect(...).toBe/toEqual/toThrow. Зависимости подменяют моками (vi.fn, vi.mock)…

Полный разбор
Как тестировать компоненты с Testing Library?Junior

Принцип Testing Library: тестировать так, как пользуется человек. Компонент рендерят, ищут элементы по роли, подписи, тексту (getByRole('button', { name: 'Отправить' })), действуют через user-event (клик, ввод) и проверяют видимый результат — текст, состояние…

Полный разбор

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования