1.7 KiB
| title |
|---|
| Visual Testing with Storybook |
Visual tests, also called visual regression tests, catch bugs in UI appearance. They work by taking screenshots of every story and comparing them commit-to-commit to identify changes.
This is ideal for verifying what the user sees: layout, color, size, and contrast. Storybook is a fantastic tool for visual testing because every story is essentially a test specification. Any time you write or update a story you get a spec for free.
There are many tools for visual testing. Storybook uses Chromatic, a visual testing service made by Storybook maintainers to run tests in the cloud across browsers.
This prevents UI bugs in Storybook itself, the design system, and our website.
We also maintain StoryShots, a snapshot testing addon that integrates with jest-image-snapshot.
Visual vs snapshot tests. Snapshot tests compare the rendered markup of every story against known baselines. When used to test how things look, snapshot tests generate a lot of false positives because code changes don’t always yield visual changes.