Настройка Chromatic для визуального тестирования компонентов
Chromatic — это облачный сервис для визуального тестирования UI-компонентов, построенный поверх Storybook. Он делает скриншот каждой story перед и после изменений, сравнивает попиксельно и требует ревью при расхождениях. Это ловит регрессии, которые обычные unit и e2e тесты пропускают: изменился padding на 2px, сдвинулся цвет кнопки, сломалась адаптивность на планшете.
Предварительные требования
Chromatic работает поверх Storybook — он должен быть уже настроен. Поддерживаются React, Vue, Angular, Svelte, Web Components. Поддерживаемые версии Storybook: 6.x, 7.x, 8.x.
Подключение
npm install --save-dev chromatic
npx chromatic --project-token=YOUR_PROJECT_TOKEN
При первом запуске Chromatic принимает все stories как baseline. При следующих запусках — сравнивает с baseline и показывает diff.
Интеграция в GitHub Actions
name: Visual Tests
on: [push]
jobs:
chromatic:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Обязательно для TurboSnap
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run: npm ci
- name: Run Chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitZeroOnChanges: true # Не падаем, ждём аппрув
При exitZeroOnChanges: true пайплайн не блокируется — изменения ждут визуального аппрува в интерфейсе Chromatic.
TurboSnap — ускорение тестирования
TurboSnap анализирует, какие файлы изменились в коммите, и тестирует только stories, которые используют изменённые компоненты. На больших проектах сокращает время тестирования с 20 минут до 2–3 минут.
- uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
onlyChanged: true # Включает TurboSnap
Процесс ревью изменений
Когда Chromatic обнаруживает визуальные изменения, он создаёт ссылку на интерфейс ревью. Там: список изменённых stories, попиксельный diff (добавил/убрал), возможность принять или отклонить каждое изменение.
Принятые изменения становятся новым baseline. Workflow встраивается в GitHub Pull Requests: статус-чек «UI Review» блокирует мерж до аппрува.
Стоимость
Chromatic — платный сервис. Бесплатный тариф: 5000 snaps/месяц. Для активно развивающегося проекта с 200+ stories обычно нужен платный план от $149/месяц.
Сроки
Настройка Chromatic для существующего Storybook с подключением GitHub Actions и настройкой PR статус-чека — 1 день.