Storybook + Vitest Integration for Component Testing
INFRASTRUCTURE •
Situation
Discovered @storybook/addon-vitest on Storybook's "Level Up" onboarding page.
Visual UI components required additional browser environment setups to run unit tests.
The addon features enable to run Storybook's tests on CLI environments without additional configurations.
Wanted to consolidate testing documentation (Storybook) and testing execution (Vitest) into a unified workflow.
Task
- Install
@storybook/addon-vitestand configure integration between Storybook stories and Vitest - Enable browser-based component testing without duplicating test code
- Set up infrastructure to run interactive tests defined in Storybook stories via Vitest CLI
Action
1. Installed Dependencies
- Added
@storybook/addon-vitest(v10.1.8) for Storybook-Vitest integration - Added
@vitest/browser-playwright(v4.0.15) for browser mode support
2. Configured Storybook
- Registered
@storybook/addon-vitestaddon to enable test execution from stories - Kept existing addons: accessibility (a11y), docs, and links
3. Configured Vitest
- Created Vitest project named "storybook" with
storybookTest()plugin - Configured plugin to point to
.storybook/directory and launch Storybook viapnpm storybook --no-open - Enabled browser mode with Playwright provider (headless Chromium)
- Added tag filtering (
tags: { include: ["test"] }) to only run stories tagged with "test" - Referenced setup file
.storybook/vitest.setup.tsfor Storybook annotations
4. Created Setup File
- Used
setProjectAnnotations()to load Storybook preview configuration - Registered
beforeAllhook to initialize Storybook context for tests
5. Added Test Scripts
pnpm test: Run all stories tagged "test" once (vitest run --project=storybook)