Что тестировать во фронтенде
Вопрос
Как ты подходишь к тестированию React-приложения: что тестируешь, чем и что не тестируешь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Тестирую поведение глазами пользователя, а не внутреннее состояние
Основа: TypeScript и ESLint, дальше интеграционные тесты компонентов, немного юнит и E2E
Инструменты: Vitest или Jest, React Testing Library, user-event, jest-dom
Сеть мокаю через MSW, а не мокаю клиент
Ключевые сценарии (вход, оплата) покрываю E2E в Playwright
Не тестирую детали реализации, стили и чужие библиотеки; осторожно со снапшотами
Что могут спросить следом
- Как не сделать тесты хрупкими?
- Как тестировать компонент с запросом к API?
- Сколько E2E-тестов достаточно?
Разбор
Главный принцип: тест должен падать, когда ломается то, что видит пользователь, и не падать при рефакторинге. Поэтому я проверяю поведение: что отображается, что происходит после клика или ввода, а не значения внутреннего состояния.
Первая линия защиты это TypeScript и линтер, они ловят много ошибок бесплатно. Больше всего пишу интеграционных тестов компонентов на Vitest и React Testing Library: рендерю компонент с детьми, действую через user-event, ищу элементы по роли и доступному имени. Чистую логику, например расчёт цены, покрываю юнит-тестами.
Запросы мокаю через MSW, чтобы компонент делал настоящий fetch, и тест не зависел от HTTP-клиента. Критические сценарии вроде регистрации и оплаты проверяю E2E в Playwright, их немного, потому что они медленнее и капризнее.
Не тестирую стили, внутренности сторонних библиотек и не держу снапшоты больших деревьев: их обновляют не глядя.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.