| name | storybook-testing |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| description | Storybook 10 testing patterns with Vitest integration, ESM-only distribution, CSF3 typesafe factories, play() interaction tests, Chromatic TurboSnap visual regression, module automocking, accessibility addon testing, and autodocs generation. Use when writing component stories, setting up visual regression testing, configuring Storybook CI pipelines, or migrating from Storybook 9. |
| tags | ["storybook","vitest","csf3","chromatic","turbosnap","visual-regression","play-functions","component-testing","a11y-testing","autodocs","esm-only","module-automocking"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 2.0.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | guidance |
| targets | [{"library":"storybook","version":">=10.3.0"}] |
| metadata | {"category":"document-asset-creation","storybook-version":"10.3"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
Storybook Testing — Storybook 10
Overview
Storybook 10 unifies component testing into a single workflow: interaction tests via play() functions, visual regression via Chromatic TurboSnap, and accessibility audits via the a11y addon — all running through Vitest. Stories are executable test specifications, not just documentation.
What's new in Storybook 10 (vs 9):
- ESM-only enforced — the single breaking change; Node 20.16+ / 22.19+ / 24+ required; 29% smaller install
- Module automocking (
sb.mock) — build-time module mocking, scoped per-project in preview.ts
- CSF factories (React, preview) —
defineMain → definePreview → preview.meta() → meta.story() chain
- Essential addons in core — viewport, controls, interactions, actions no longer separate deps
- Import path changes —
@storybook/test → storybook/test (old paths still work as aliases)
- React Server Component story support — test RSC in isolation
- Vitest 4 support —
experimental-addon-test renamed to addon-vitest
When to use this skill:
- Writing component stories in CSF3 format with TypeScript
- Setting up interaction tests with
play() functions
- Configuring Chromatic visual regression with TurboSnap
- Using module automocking at the story level
- Running accessibility tests in CI via the a11y addon
- Generating living documentation with autodocs
- Migrating from Storybook 9 to 10
Quick Reference
| Rule | Impact | Description |
|---|
storybook-csf3-factories | HIGH | Typesafe CSF3 story factories with satisfies Meta |
storybook-play-functions | CRITICAL | Interaction testing with play() and @storybook/test |
