TGViewer
Заметки Андрея Романова Заметки Андрея Романова @andrew_r_notes · 1.23K subscribers
Post #108 3.02K
О пользе (или её отсутствии) тестирования Реакт-компонентов

Наткнулся на очередную статью о юнит-тестировании Реакт-компонентов. К сожалению, в таких статьях часто призывают бросать всё и начинать тестировать компоненты, но редко объясняют, зачем и кому это нужно. Попробую восполнить этот пробел.

Можно разделить тестирование компонентов на два вида: снепшотное тестирование разметки компонентов и тестирование логики компонентов.

Снепшотное тестирование комопнентов

Снепшотное тестирование разметки компонентов — довольно бесполезная вещь в подавляющем большинстве случаев. Оно полезно, если вы разрабатываете общую библиотеку компонентов в крупной компании вроде Яндекса или Авито. А если вы продуктовый разработчик, такие тесты себя не окупят — они слишком низкоуровневые. Они отслеживают только изменения разметки компонентов, а по одному только диффу разметки скорее всего будет сложно сказать, поломается ли компонент в браузере пользователя.

Интерфейс меняется чаще логики, поэтому если у вас есть свободное время, в первую очередь покройте тестами логику приложения. Если вы покрыли логику тестами и у вас всё ещё остаётся свободное время, прикрутите тестирование скриншотами — оно гораздо полезнее снепшотов, потому что вместо снимков разметки делаются снимки отрендеренного компонента с учётом особенностей окружения (браузера).

Тестирование логики компонентов

Этот вид тестирования полезен в случаях, когда у вас есть компоненты со встроенной логикой: например, выпадающие списки, саджесты или таблицы с сортировкой. Но я бы всё равно посоветовал вынести логику наружу компонента, написать на неё обычные юнит-тесты, а корректность работы интерфейса проверять автотестами и скриншотами — это надёжнее простых снимков разметки.
Medium Модульное тестирование React-приложения с помощью Jest и Enzyme Перевод статьи Berry de Witte: Unit testing your React application with Jest and Enzyme.
More from @andrew_r_notes
  1. Dec 31, 2025С наступающим 2026 Пришло время подвести итоги года, в очередной раз делюсь новостями и ре…
  2. Feb 23, 2025Мониторинг падений браузера В рабочем чате недавно интересовались, можно ли как-то отследи…
  3. Dec 31, 2024С наступающим 2025 Давно ничего не писал, собрался с силами и вернулся к давно забытому жа…
  4. Feb 20, 2022Как упростить кодревью Делюсь проверенными на личном опыте способами упростить ревью вашег…
  5. Jun 2, 2021Список сделанных рабочих задач Рутинная, но крайне полезная практика — ведение списка сдел…
  6. Jan 12, 2021​Подход Fail Fast В разработке есть довольно здравые и широко применимые подходы, о которы…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →