Что такое Storybook и как он используется в проекте

Что проверяют

Использовали ли вы Storybook как рабочий инструмент или только слышали про «витрину компонентов». Интервьюеру важно, понимаете ли вы, как сторис связаны с тестами, дизайн-системой и CI. Следом часто спрашивают, как показать компонент, которому нужны стор, роутер или данные с сервера.

Как отвечать

Storybook это отдельное приложение, где каждый компонент рендерится изолированно в разных состояниях. Одно состояние называется story. Ставится командой npm create storybook@latest, работает с React, Vue, Angular и Svelte.

Сторис пишут в формате CSF3: файл Button.stories.tsx, экспорт по умолчанию meta с полем component, каждый именованный экспорт это состояние со своими args:

• args и controls: пропсы задаются аргументами и меняются прямо в панели, удобно проверять крайние случаи вроде длинного текста или пустого списка;
• decorators: оборачивают сторис в провайдеры темы, i18n, роутера, стора;
• моки сети: msw-storybook-addon отдаёт компоненту фейковые ответы API;
• Autodocs: тег autodocs собирает страницу документации из пропсов и сторис;
• play-функции: сценарий взаимодействия (клик, ввод, проверка через expect) выполняется прямо в сторис;
• тесты: с 9-й версии сторис прогоняются как тесты через @storybook/addon-vitest в браузерном режиме Vitest;
• доступность: @storybook/addon-a11y проверяет каждое состояние через axe;
• визуальная регрессия: Chromatic или скриншоты через Playwright сравнивают картинку с эталоном.

В проекте Storybook обычно живёт рядом с дизайн-системой: дизайнер и продакт смотрят задеплоенную статическую сборку (storybook build), а в CI сторис гоняются как тесты.

Где спотыкаются

Считают Storybook только документацией. Без тестов и визуальной регрессии сторис быстро отстают от реального компонента, и витрина показывает то, чего в продукте давно нет.

Пишут сторис для компонентов, которые сами ходят в API и глобальный стор. Такие компоненты трудно изолировать, и это сигнал разделить их на презентационную часть и контейнер.

Считают, что снапшот-тест HTML заменяет визуальную проверку. Он не видит сломанный CSS, а скриншотный тест видит.