Как тестировать React-компонент
Вопрос
Как бы ты протестировал форму логина на React: что проверял бы и какими инструментами?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Vitest или Jest как раннер, Testing Library для рендера
поиск элементов по роли и label, а не по классам и test-id
userEvent для ввода и кликов
проверка поведения: ошибки валидации, вызов onSubmit с данными, состояние загрузки
сеть мокается на границе (MSW или подмена модуля API)
асинхронность через findBy или waitFor, без фиксированных пауз
Что могут спросить следом
- Чем getBy отличается от queryBy и findBy?
- Зачем MSW, если можно замокать fetch?
- Что бы ты проверил e2e-тестом, а что нет?
Разбор
Беру Vitest с Testing Library и пишу тесты с точки зрения пользователя. Рендерю форму, нахожу поля через getByLabelText и кнопку через getByRole('button', { name: 'Войти' }), ввожу данные через userEvent. Проверяю сценарии: пустая отправка показывает ошибки валидации; правильные данные вызывают onSubmit с нужными значениями или отправляют запрос; пока идёт запрос, кнопка заблокирована; при ошибке сервера видно сообщение. Сеть подменяю на границе через MSW, тогда код компонента работает с настоящим fetch. Асинхронные изменения жду через findBy, а не через sleep. Внутренний state и имена хендлеров не проверяю, иначе тесты будут ломаться при рефакторинге. Сквозной сценарий входа с реальным бэкендом оставляю одному e2e-тесту в Playwright.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.