Тестирование Storybook и визуальная регрессия
Запускайте функции play для интерактивных тестов и интегрируйте Chromatic для сравнения изображений.
«Тестирование Storybook и визуальная регрессия» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Зачем тестировать в Storybook
В Storybook 7 и более поздних версиях есть пакет @storybook/test для тестирования взаимодействий (функций сценариев взаимодействия), а также интеграция с Chromatic для автоматического визуального регрессионного тестирования — и всё это без выхода из обозревателя компонентов.
Функции взаимодействия
Функция play выполняется после отображения истории и имитирует взаимодействия пользователя с помощью утилит @storybook/test. Результаты отображаются на панели Interactions.
import { within, userEvent, expect } from '@storybook/test';
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
await expect(canvas.getByText('Success!')).toBeInTheDocument();
},
};Проверки в функциях взаимодействия
Используйте expect из @storybook/test (повторно экспортируемый из Vitest/Jest) внутри функций взаимодействия, чтобы проверять состояние компонента после взаимодействий.
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByRole('button', { name: /add/i });
await userEvent.click(button);
await expect(canvas.getByText('1 item')).toBeInTheDocument();
await userEvent.click(button);
await expect(canvas.getByText('2 items')).toBeInTheDocument();
},Запуск тестов историй с помощью средства запуска тестов Storybook
Пакет @storybook/test-runner преобразует каждую историю с функцией взаимодействия в тест Jest. Запускайте их в CI одной командой.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookЧто такое визуальное регрессионное тестирование
Визуальное регрессионное тестирование сохраняет снимки экрана компонентов и отмечает различия на уровне пикселей между коммитами. Chromatic, Playwright и Percy — популярные инструменты.
Настройка Chromatic
Chromatic — официальная облачная платформа Storybook для визуального тестирования. Отправьте истории, и Chromatic сравнит снимки экрана с предыдущим эталоном.
# Install
npm install chromatic --save-dev
# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>
# CI: add to GitHub Actions
- name: Chromatic
run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}Проверка визуальных изменений
Chromatic показывает интерфейс сравнения, где проверяющие принимают или отклоняют визуальные изменения. Принятые изменения становятся новым эталоном, а отклонённые блокируют PR.
Тестирование по снимкам в Storybook
Средство запуска тестов также может автоматически выполнять проверки доступности с помощью @storybook/addon-a11y для каждой истории в CI.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Компоновка Storybook
Объединяйте несколько экземпляров Storybook из разных репозиториев в одном интерфейсе — это полезно для систем дизайна, общих для нескольких проектов.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Тестирование адаптивных историй
Используйте дополнение для настройки области просмотра, чтобы тестировать истории на мобильных, планшетных и настольных размерах. Укажите область просмотра в параметрах истории, чтобы зафиксировать для неё определённый размер.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Предотвращение нестабильности тестов
Избегайте нестабильных визуальных тестов: используйте delay в функциях взаимодействия, чтобы дождаться завершения анимаций, или глобально отключите анимации в предварительном просмотре Storybook.
// .storybook/preview.ts
export const parameters = {
chromatic: { disableSnapshot: false },
// Disable CSS animations for consistent screenshots
};
// Global CSS for tests:
// * { animation: none !important; transition: none !important; }Отчёты о покрытии
Запустите test-storybook --coverage, чтобы создать отчёт о покрытии, показывающий, какие строки компонентов выполняются тестами функций взаимодействия.
Быстрая проверка
Где функция взаимодействия Storybook выполняет свои взаимодействия?
Итоги
Функции взаимодействия тестируют взаимодействия компонентов внутри Storybook с помощью @storybook/test. Средство запуска тестов преобразует функции взаимодействия в тесты Jest для CI. Chromatic добавляет снимки для визуального регрессионного тестирования и отмечает изменения интерфейса на уровне пикселей, чтобы их можно было проверить перед слиянием.
Часто задаваемые вопросы
Урок «Тестирование Storybook и визуальная регрессия» бесплатный?
Да — полный текст урока «Тестирование Storybook и визуальная регрессия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Тестирование Storybook и визуальная регрессия»?
Запускайте функции play для интерактивных тестов и интегрируйте Chromatic для сравнения изображений. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Тестирование Storybook и визуальная регрессия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Storybook в проекте React
- Написание историй CSF3
- Аргументы, элементы управления и дополнение Actions
- Тестирование Storybook и визуальная регрессия