Storybook
Тема дорожной карты · Frontend разработчик
Storybook — это open-source frontend-мастерская для разработки, тестирования и документирования UI-компонентов в изоляции от остального приложения; её используют команды, работающие с React, Vue, Svelte, Angular и другими фреймворками. Каждый компонент документируется через «истории» (stories) — файлы с расширением .stories.tsx, описывающие различные состояния и пропсы компонента, что позволяет визуально проверять поведение во всех сценариях без необходимости поднимать полное приложение. Storybook интегрируется с Vitest и Playwright через аддон @storybook/test для тестирования взаимодействий и визуальных регрессионных снимков, а аддон @storybook/addon-a11y выводит нарушения доступности прямо в интерфейсе Storybook. Установка Storybook в проект Vite или Next.js выполняется командой npm create storybook@latest, а запуск storybook dev поднимает локальную мастерскую на localhost:6006, перезагружаемую при изменении компонентов.
Как это работает
Storybook на frontend имеет слои: unit (Vitest/Jest для утилит + reducers), компонентные (React Testing Library / Vue Test Utils для поведения компонентов), end-to-end (Playwright, Cypress для полного browser-флоу). Философия RTL: запрашивайте DOM так же, как пользователь — по роли, label, тексту — не по деталям реализации. Мокайте на сетевой границе (msw), не внутри компонентов. pnpm test в CI на каждый PR.
Когда применять
Тестируйте критичные user-флоу end-to-end (регистрация, checkout, главные формы) через Playwright + msw. Сложная чистая логика — unit-тесты. Snapshot-тесты — пропустите для часто меняющегося. Цель — behavioural coverage на integration-уровне, не 100% строк (стимулирует тривиальные тесты). E2E — headless CI на каждый PR.
Типичные ошибки
Ловушки Storybook: запросы по CSS-классу (data-testid лучше; ARIA role — лучшее); over-mocking React-внутренностей (тестируете моки, не код); flaky-тесты оставлены — каждый подрывает доверие; нет таймаутов в waitFor (висит в CI); snapshot-тесты на очень волатильном выводе. Карантинить, потом чинить или удалять.