Best-in-class Component Testing at your fingertips

Storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular applications. Readers can learn about component-driven development, UI testing, and design systems. With documentation, tutorials, and community contributions, Storybook offers  guidance and tools for building modular and reusable UI components.

Storybook

Storybook 9 introduces comprehensive component testing powered by Vitest, offering three types of tests: interaction tests for user behavior simulation, accessibility tests using axe-core for WCAG compliance, and visual tests through Chromatic for UI regression detection. The new Test widget enables running all tests with one click, includes coverage reports, and provides debugging panels. This approach fills the gap between unit tests and E2E tests, allowing developers to test thousands of UI states with minimal maintenance while leveraging existing stories as test cases.

Component Test with Storybook and Vitest

Test widget: Test everything in one click

<p>At the company I work for, we rely heavily on Storybook to test our stuff (it’s the integration layer in our testing pyramid), and we’ve built a lot of custom tools to enable these visual/a11y/interaction tests in Storybook and with good DX. It’s nice to see them shipped in Storybook itself, but it also means we’ll soon have a lot of technical debt to deal with (migrate from custom tools to built-in ones) 😭</p>
