Краткое руководство по автоматизированному визуальному регрессионному тестированию с помощью библиотеки «jsdom-screenshot»

Что такое автоматизированное визуальное регрессионное тестирование?

Лучше один раз увидеть, чем сто раз услышать. Я нашел хороший GIF, который прекрасно объясняет, что такое автоматическое визуальное регрессионное тестирование. Это было найдено на странице Визуальные тесты Storybook:

Что будет покрыто:

  • Предпосылки;
  • Монтаж;
  • Конфигурация;
  • Первый тест;
  • Несколько тестов;
  • Изменения обновления состояния теста;

Предпосылки

Я создал проект React, созданный с помощью create-react-app с шаблоном TypeScript:

npx create-react-app my-app --template typescript

… и с пакетом npm styled-components:



Начало работы с Styled-Components
Краткое руководство по Styled-Components с примерами.javascript.plainenglish.io



Далее мы создадим простой компонент <Button/>:

Стиль кнопки скопирован отсюда, Button 41 пример:



Примеры красивых кнопок CSS — сканирование CSS
Все эти кнопки изначально были скопированы с помощью сканирования CSS (нажмите здесь, чтобы попробовать бесплатную демоверсию). С помощью CSS Scan вы можете…getcssscan.com



Монтаж

Для локальных тестов мы будем использовать пакет jsdom-screenshot:



jsdom-screenshot
Создание скриншотов JSDOM. ⚠️ Этот пакет полезен для визуального регрессионного тестирования, но очень экспериментальный. Если вы…www.npmjs.com



Из официальной документации --›jsdom-screenshot пакет полезен для визуального регрессионного тестирования, но в высшей степени экспериментальный.

Если вы просто хотите, чтобы визуальное регрессионное тестирование работало, я бы рекомендовал использовать для него сервис CI (для этой цели мы будем использовать Chromatic). В противном случае вы столкнетесь с различиями из-за разных операционных систем, рендеринга шрифтов, анимации и даже графических процессоров.

Установите необходимые пакеты:

yarn add jest-image-snapshot @types/jest-image-snapshot jsdom-screenshot @types/jsdom-screenshot -D

Результат:

"jest-image-snapshot": "^4.5.1",
"jsdom-screenshot": "^4.0.0",
"@types/jest-image-snapshot": "^4.3.1",
"@types/jsdom-screenshot": "^3.2.1",

Конфигурация

Далее нам нужно будет обновить setupTests.ts файл:

Содержание:

Первый тест

Теперь мы готовы добавить наш первый тест. Создайте Button.spec.tsx файл:

Содержимое файла Button.spec.tsx:

Если вы запускаете этот тест в первый раз → будет создана папка с button-spec-tsx-should-render-button-1-snap.png файлом в ней:

Вот как моя кнопка выглядит в приложении:

И это то, что jsdom-screenshot сгенерирует для нас. Снимок изображения:

Если вы будете запускать этот тест снова и снова, ничего не произойдет, но…

Давайте изменим цвет текста кнопки с белого на черный:

// before
color: #ffffff;
// after
color: #000000;

Запустим тест еще раз:

Мы получим ошибку:

Error: Expected image to match or be a close match to snapshot but was 0.415% different from snapshot (166 differing pixels).
See diff for details: <project-path> +
/src/components/Button/__image_snapshots__/__diff_output__/button-spec-tsx-should-render-button-1-diff.png

и будет создана папка __diff_output__ с button-spec-tsx-should-render-button-1-diff.png файлом в ней:

Давайте проверим это изображение:

Несколько тестов

Мы можем создать сколько угодно тестов с разными случаями. Давайте обновим наш тестовый файл .spec:

⚠️ ПРИМЕЧАНИЕ. Существует проблема с обновлением цвета стилизованных компонентов при наведении курсора, поэтому нам нужно явно отобразить кнопку при наведении курсора, чтобы стили применялись правильно:

Удалите предыдущие снимки и снова запустите тесты:

Результат:

… будут созданы новые файлы:

Изображений:

Изменения обновления состояния теста

Давайте добавим новый компонент с «Hello», который будет отображаться после того, как пользователь нажмет на нашу ранее созданную кнопку:

Добавляйте новые тесты после:

Запустите тесты:

Новые файлы:

  • button-spec-tsx-should-render-button-component-for-width-200-height-60-clicked-state-1-snap.png
  • button-spec-tsx-should-render-button-component-for-width-400-height-100-clicked-state-1-snap.png

⚠️ ПРИМЕЧАНИЕ: этот подход очень полезен для локальной разработки и локальных тестов. Особенно было бы неплохо запустить эти тесты перед git push командой, но если вы хотите больше возможностей в CI и не сталкиваетесь с проблемами производительности, я бы посоветовал вам использовать Chromatic. Вы можете узнать больше об этом здесь:



React и Chromatic. Автоматическое визуальное регрессионное тестирование
Пошаговое руководство по автоматическому визуальному регрессионному тестированию с помощью Chromaticartem-diashkin.medium.com



Ссылка на репозиторий Github:



GitHub — nemrosim/react-visual-regression-testing-example
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



Если вам понравилась эта история, вы также можете посмотреть Список всех моих историй, возможно, вы найдете для себя другую интересную историю. Удачного кодирования!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.