Основы тестирования
Тестирование React-компонентов аналогично тестированию любого другого JavaScript-кода.
Есть несколько способов тестирования React-компонентов. В целом, можно выделить два основных:
- Рендеринг деревьев компонентов в упрощенной тестовой среде и проверка их предполагаемого вывода.
- Запуск всего приложения в реалистичной среде браузера (так называемые «сквозные» тесты).
Этот раздел документации посвящён стратегиям тестирования первым способом. Несмотря на то, что «сквозные» тесты могут быть очень полезны для предотвращения регрессии в важных потоках приложения, эти тесты не касаются React-компонентов напрямую и выходят за рамки этого раздела.
Компромиссы
Выбирая инструменты тестирования, стоит рассмотреть несколько компромиссов:
- Скорость итераций против реалистичной среды: Одни инструменты позволяют получить быстрый цикл «внёс изменения — увидел результат», но не моделируют поведение браузера в точности. Другие инструменты могут использовать реальную среду браузера, но снижают скорость итераций и могут вызывать проблемы при непрерывной интеграции.
- Как много фиктивных объектов использовать: При работе с компонентами границы между «модульным» и «интеграционным» тестом выглядят размытыми. Тестируя форму, нужно ли тестировать кнопки внутри неё? Или компонент «кнопка» должен иметь свои собственные тесты? Должны ли изменения в коде кнопки ломать тест формы?
Одни варианты ответов подойдут одним командам и продуктам, другие другим.
Рекомендуемые инструменты
Jest — исполнитель тестов на JavaScript, который позволяет взаимодействовать с DOM через jsdom. Несмотря на то, что jsdom только приблизительно реализует работу браузера, в большинстве случаев этого достаточно для тестирования React-компонентов. Jest предлагает отличную скорость итераций вместе с мощными возможностями, например фиктивные модули и таймеры, которые дают больше контроля над исполнением кода.
React Testing Library — это набор вспомогательных функций, позволяющий тестировать React-компоненты не полагаясь на их внутреннюю реализацию. Такой подход упрощает рефакторинг, а также подталкивает вас применять лучшие практики по улучшению доступности. Несмотря на то, что библиотека не позволяет делать «поверхностный» рендер компонента без дочерних компонентов, исполнители тестов, например, Jest позволяет это сделать через фиктивные модули.
Двигаемся дальше
Этот раздел состоит из двух страниц: