Вопрос с собеседования · Frontend

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

JuniorВыкатка и эксплуатация
Ещё спрашивают так:
  • Чем Testing Library отличается от Enzyme?
Коротко

Testing Library проверяет компонент как пользователь: рендерит его, ищет элементы по роли, подписи, тексту, а не по классам и внутреннему состоянию. user-event имитирует реальные действия (клик, ввод с клавиатуры, Tab) с правильной последовательностью событий. Проверки — через матчеры jest-dom: toBeInTheDocument, toHaveValue, toBeDisabled. Запуск — Vitest или Jest с jsdom.

  • Тесты не ломаются при рефакторинге внутренностей
  • Поиск по роли заодно проверяет доступность
  • user-event асинхронный — await для каждого действия

А ещё Чем больше тест похож на использование, тем больше уверенности он даёт

Подробно

test("добавляет задачу", async () => {
  const user = userEvent.setup();
  render(<Todo />);
  await user.type(screen.getByRole("textbox", { name: "Задача" }), "Купить хлеб");
  await user.click(screen.getByRole("button", { name: "Добавить" }));
  expect(screen.getByText("Купить хлеб")).toBeInTheDocument();
});

Что хотят услышать

  • Тестирование как пользователь.
  • Поиск по ролям и подписям.
  • user-event и jest-dom.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Тесты проверяют внутреннее состояние компонента и имена CSS-классов в итоговой разметке
  • ✓Рендер, поиск по роли и подписи, действия через user-event — тест как пользователь
  • ✗user-event синхронный, поэтому await перед действиями не нужен и только замедляет тест
  • ✗Testing Library работает только с классовыми компонентами и не видит хуки внутри функций

Связанные вопросы

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

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

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

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