Storybook 8 shifts to Vite as its default builder and introduces portable stories that bridge component documentation and automated testing. Test your knowledge of its modern features.
0 / 5 completed
1 / 5
Why does Storybook 8 use Vite as its default builder instead of Webpack?
Vite's native ES module server skips bundling during development — it serves files on demand and transforms them on the fly. For Storybook, this means near-instant startup (no full bundle compile) and fast HMR that only processes changed files. Large component libraries that took minutes to start with Webpack now start in seconds.
2 / 5
What are portable stories in Storybook 8?
Portable stories (via composeStory/composeStories) let you import your Storybook stories into Vitest or Jest tests and render them with the full decorator and args context. This means you write the story once and reuse it as both a visual Storybook entry and an automated component test — no duplication.
3 / 5
What does Storybook's test runner do with your stories?
The Storybook test runner (built on Playwright) visits each story in a headless browser and asserts that it renders without throwing errors. You can extend this with play functions (interaction tests) and @storybook/addon-a11y checks. It bridges Storybook stories and automated CI testing without duplicating test setup.
4 / 5
What is autodocs in Storybook 8?
Autodocs generates a documentation page for each component automatically when you add tags: ['autodocs'] to a story. The page includes an interactive args table derived from TypeScript/PropTypes, renders the primary story, and lists all named stories. It replaces manually written MDX docs for standard component documentation.
5 / 5
What does Chromatic provide that the Storybook test runner alone does not?
Chromatic is a cloud visual testing service by the Storybook team that captures screenshots of every story and diffs them against a baseline. It detects unintentional visual regressions — layout shifts, colour changes, font issues — that automated functional tests miss. Reviewers approve or deny visual changes in a UI review workflow.