<aside> ℹ️
Storybook Test has launched and the full documentation is available here: https://storybook.js.org/docs/writing-tests
</aside>
Visual tests are the most efficient way to test your components. With the click of a button you can take snapshots of every story in your Storybook and compare those snapshots to baselines — last known “good” snapshots. Not only does this allow you to check the appearance of your components, but they are also able to check a large subset of component functionality without having to write or maintain any test code!
Storybook supports cross-browser visual testing natively using Chromatic, a cloud service made by the Storybook team. When you enable visual testing, every story is automatically turned into a test. This gives you instant feedback on UI bugs directly in Storybook.
Add visual tests to your project by installing @chromatic-com/storybook, the official addon by Storybook maintainers:
npx storybook@latest add @chromatic-com/storybook
When you start Storybook, you'll see a new addon panel for Visual Tests where you can run tests and view results.
<aside> ℹ️
Already using the Test addon? In the expanded testing module, you’ll now see a Visual tests section:
Clicking the Run tests button at the bottom will run all tests, both component and visual.
</aside>
First, sign in to your Chromatic account. If you do not have an account, you can create one as part of the sign in process.
Once signed in, you will see your Chromatic account(s) and their projects. Either select one from the list or create a new one.
Now that you have linked your project to the addon, you can press the “Catch a UI change” button to run your first build of visual tests.
That first build will create the baseline snapshots for your stories, which will be compared against when you run visual tests again.