Testing
Design systems are the foundation of consistent UI. A broken button component or incorrect token in your design system affects every product that consumes it. Testing a design system requires more rigor than testing a single application — components must work correctly across all their states, variants, themes, and accessibility requirements.
Testing
Storybook interaction testing lets you simulate user behavior directly inside your stories — clicks, typing, keyboard navigation — and assert the results. Since Storybook 8, all of this runs through the @storybook/test package, which provides a unified API built on top of Testing Library and Vitest. This guide covers everything you
Testing
Both Storybook and Playwright can test UI components in a real browser. Both give you real DOM interaction, real CSS, and real browser behavior. But they approach component testing from different angles, and choosing the right one (or combining both) depends on your priorities. This guide compares Storybook and Playwright
Testing
Storybook 8 made component testing a first-class citizen. What was previously a documentation tool is now a full component testing platform — complete with built-in test runner, Vitest integration, and portable stories that run outside Storybook itself. This guide covers everything: setting up Storybook 8 for testing, writing stories
React
React Cosmos is a sandbox for developing React components in isolation. Unlike Storybook and Ladle, Cosmos focuses on interactive development: you can manipulate component state in real time, inspect props changes, and mock context providers. It also integrates with testing tools so fixtures (Cosmos's name for stories) can
Vue
Histoire is a component story tool for Vue 3 (and experimentally Svelte). Where Storybook adapted its React-first design to Vue, Histoire was built with Vue 3 in mind from the start. It uses Vite natively, integrates with the Vue SFC format naturally, and renders stories in an iframe-less
React
Ladle is a fast, lightweight alternative to Storybook for developing and documenting React components. It uses Vite instead of Webpack, which means near-instant startup and hot module replacement measured in milliseconds rather than seconds. Ladle is compatible with the CSF (Component Story Format) that Storybook uses, so migrating existing
Test Automation
Storybook started as a UI development environment — a place to build and view components in isolation. But over the past few years it has grown into a serious component testing platform. With play functions, the @storybook/test package, and the Storybook test-runner, you can write interaction tests directly inside