userEvent
Тема дорожной карты · React
@testing-library/user-event — это библиотека-компаньон для React Testing Library, симулирующая реальные браузерные взаимодействия — ввод текста, клики, переключение табуляцией, выбор, загрузку файлов — значительно точнее, чем встроенные вспомогательные методы fireEvent из RTL, которые лишь диспатчат синтетические DOM-события без сопутствующих побочных эффектов браузера. API userEvent.setup() (v14+) возвращает экземпляр user-event, правильно последовательно обрабатывающий события указателя, события клавиатуры, переключения фокуса и ввод методом ввода, — делая тесты ближе к поведению реального пользователя в браузере при взаимодействии с React-компонентом. Использование user-event в тестах React-компонентов даёт более реалистичное и надёжное покрытие: например, ввод текста в контролируемое поле через await user.type(input, 'hello') запускает обработчики onChange и обновления состояния React в той же последовательности, что и браузер. user-event легко интегрируется с Jest и поддерживает async/await для взаимодействий, инициирующих обновления управления состоянием или побочные эффекты загрузки данных в React-компонентах. Типы TypeScript включены в пакет @testing-library/user-event, гарантируя проверку типов методов и параметров совместно с остальным TypeScript React-тестовым набором.
Как это работает
userEvent использует Jest (или Vitest) как раннер и React Testing Library (RTL) как слой рендера + запросов. Философия RTL: запрашивайте DOM так же, как пользователь — по accessible role, label, тексту — не по деталям реализации (CSS-класс, внутренний state). userEvent симулирует реальные действия (печать, клик, tab) точнее, чем fireEvent. API-моки — на сетевой границе через msw, не внутри компонента.
Когда применять
Покройте (а) критичные пользовательские флоу end-to-end (регистрация, checkout) через RTL + msw, (б) сложную чистую логику unit-тестами, (в) пофикшенные регрессии (зафиксируйте их). Пропустите snapshot-тесты для часто меняющегося — превращаются в "rubber-stamp"-падения. Гоняйте тесты в CI на каждый PR; быстрый фидбек бьёт глубокие моки. Цель — ~50% behavioural покрытия на integration-уровне, не 100% строк.
Типичные ошибки
Ловушки userEvent: запросы через data-testid повсюду (тесты привязаны к разметке, accessibility-проблемы скрыты); защитный act() без нужды (RTL оборачивает сам); моки самого React (тестируете мок); медленные snapshot, маскирующие реальные баги; тесты, бьющие в реальные API в CI (flaky + медленно). Прочтите RTL "common mistakes" — окупается в первую неделю.