New
I18n with StorybookAutomate with Chromatic
Star74,173

How to test UIs with Storybook

Storybook provides a clean-room environment for testing components in isolation. Stories make it easy to explore a component in all its variations, no matter how complex.

That means stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, testing those stories is a low-effort way to prevent UI bugs over time.

Stories are tests

The simplest testing method is manual β€œspot checking”. You run Storybook locally, then eyeball every story to verify its appearance and behavior. Publish your Storybook online to share reproductions and get teammates involved.

To test a component in isolation, you often have to mock data, dependencies, or even network requests. Check out our guide on mocking in Storybook for more info.

Storybook also comes with tools, a test runner, and handy integrations with the larger JavaScript ecosystem to expand your UI test coverage. These docs detail how you can use Storybook for UI testing.

  • Test runner to automatically test your entire Storybook and catch broken stories.
  • Visual tests capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
  • Accessibility tests catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
  • Interaction tests verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
  • Snapshot tests detect changes in the rendered markup to surface rendering errors or warnings
  • Import stories in other tests to QA even more UI characteristics
✍️ Edit on GitHub – PRs welcome!
Join the community
5,784 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI