mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 04:21:16 +08:00
29 lines
1.9 KiB
Plaintext
29 lines
1.9 KiB
Plaintext
---
|
|
title: 'How to test UIs with Storybook'
|
|
hideRendererSelector: true
|
|
sidebar:
|
|
order: 3
|
|
title: Testing
|
|
---
|
|
|
|
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.
|
|
|
|
<Video src="../_assets/writing-tests/stories-are-tests-optimized.mp4" />
|
|
|
|
The simplest testing method is manual “spot checking”. You run Storybook locally, then eyeball every story to verify its appearance and behavior. [Publish](../sharing/publish-storybook.mdx) 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](../writing-stories/build-pages-with-storybook.mdx#mocking-connected-components) for more info.
|
|
|
|
Storybook also comes with tools, [a test runner](./test-runner.mdx), 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.
|
|
|
|
* [Component tests](./component-testing.mdx) for user behavior simulation
|
|
* [Visual tests](./visual-testing.mdx) for appearance
|
|
* [Accessibility tests](./accessibility-testing.mdx) for accessibility
|
|
* [Snapshot tests](./snapshot-testing/snapshot-testing.mdx) for rendering errors and warnings
|
|
* [Test runner](./test-runner.mdx) to automate test execution
|
|
* [Test coverage](./test-coverage.mdx) for measuring code coverage
|
|
* [End-to-end tests](./import-stories-in-tests/stories-in-end-to-end-tests.mdx) for simulating real user scenarios
|
|
* [Unit tests](./import-stories-in-tests/stories-in-unit-tests.mdx) for functionality
|