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
Testing
Visual regression testing catches unintended UI changes by comparing screenshots of your components against known-good baselines. Storybook + Chromatic is the most widely adopted setup for this: Storybook provides isolated component renders across all states, and Chromatic handles screenshot capture, diffing, and the review workflow. This guide covers everything from
JavaScript
Storybook 8 expanded from a documentation tool into a component testing platform. The key additions are play functions (interaction tests that run inside the browser), portable stories (importing stories into Vitest or Jest), and the Storybook test runner that executes all play functions in CI. Together they let you write
Testing
Chromatic is a visual testing tool built specifically for Storybook. While Percy and Applitools operate at the page level (snapshot a URL), Chromatic operates at the component level — it captures every story in your Storybook and compares them against approved baselines. This makes Chromatic the right choice for design system