New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,351

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
  • Coverage tests to measure how much of your code is covered by your tests
  • 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,861 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI