Write stories in CSF format, use args and decorators, implement play functions for interaction testing, and integrate with the Interactions panel.
0 / 5 completed
1 / 5
What is the Component Story Format (CSF) in Storybook 8?
CSF format: the default export declares the component and global metadata: export default { component: Button, title: "UI/Button" }. Each named export is a story with its own args. CSF3 (current) allows stories to be plain objects — no render function required when args-driven. TypeScript generics Story<typeof Button> provide arg type inference.
2 / 5
What are args in Storybook and how do they enable interactive exploration?
Args: args flow from multiple levels — story args override story-level defaults, which override component-level defaults in the default export, which override global args. The Controls addon auto-generates UI controls based on the component's TypeScript prop types or JSDoc comments. Args are also the mechanism used by play functions and interaction tests to drive component state.
3 / 5
What are Storybook decorators and when are they used?
Decorators: global decorators in .storybook/preview.ts wrap every story — useful for theme providers and mock data contexts. Component-level decorators in the default export apply to all stories for that component. Story-level decorators override for specific cases. This composable wrapper system avoids repeating provider setup in every story.
4 / 5
What are play functions in Storybook and what do they enable?
Play functions: combined with the @storybook/test utilities, play functions drive the component through user flows and make assertions. These become runnable interaction tests via storybook test or can be converted to Playwright/Cypress tests. This enables a "test as you document" workflow — stories serve both as documentation and as test cases.
5 / 5
What is Storybook interaction testing and how does it integrate with the component story?
Interaction testing: the Interactions panel in Storybook UI replays the play function step by step with pass/fail indicators. Running storybook test in CI executes all stories with play functions as tests in a headless browser. This collapses the gap between documentation and testing — a story that demonstrates a form submission also tests that the submission works correctly.