Этап 10 из 19 · ≈ 6 ч

Юнит-тесты и тесты компонентов

Основа с Junior

Vitest и Testing Library — проверять поведение, а не реализацию.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("добавляет товар в корзину", async () => {
  render(<Product id={1} />);
  await userEvent.click(screen.getByRole("button", { name: "В корзину" }));
  expect(screen.getByText("В корзине: 1")).toBeInTheDocument();
});

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

  • Testing Library ищет элементы так, как их видит пользователь: по роли, подписи, тексту. Тест не ломается при рефакторинге внутренностей.
  • Не проверять внутреннее состояние и количество рендеров — только видимое поведение.
  • Сетевые запросы подменять на уровне сети (MSW), а не мокать fetch в каждом тесте.
  • Таймеры — фейковые (vi.useFakeTimers), асинхронность — findBy… и waitFor.
  • Покрытие кода — ориентир, а не цель.

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

Junior ≈ 6 ч

  • Пишет юнит-тесты на Vitest для чистых функций
  • Пишет тест компонента через Testing Library, находя элементы по роли и подписи

Практика. Покрыть тестами утилиты и 3 компонента учебного проекта.

Middle ≈ 8 ч

  • Подменяет сеть через MSW и тестирует асинхронное поведение
  • Покрывает тестами ключевые сценарии компонентов, а не детали реализации

Практика. Написать тесты формы оформления заказа с подменой API через MSW — успех, ошибка сервера, валидация.

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

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

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

Смотреть все
Как писать юнит-тесты на фронтенде (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-компоненты через 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 секунды): для…

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

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

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

Документация

Есть в картах: Frontend-разработчик QA-инженер (тестировщик) React

← Вся карта «Frontend-разработчик»

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

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

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

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