В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека
cypress-react-unit-test. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot.В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.
Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.
#react #testing
https://glebbahmutov.com/blog/open-source-visual-testing-of-components/