| title |
|---|
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.
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