visual-testing
Capture and compare image snapshots automatically and manually, in Storybook and in Vitest Browser Mode.
| Package | What it is for | npm | Docs |
|---|---|---|---|
storybook-addon-vis |
Capturing and comparing image snapshots of your stories, automatically and manually, from Storybook Vitest addon tests. | npm | Get started, Features |
vitest-plugin-vis |
Capturing and comparing image snapshots in tests that run in Vitest Browser Mode, without Storybook. | npm | Get started, Features |
Which one do I need
Section titled “Which one do I need”Use storybook-addon-vis for Storybook stories and vitest-plugin-vis for Vitest Browser Mode tests without Storybook.
See Choosing a package.
Learn visual testing
Section titled “Learn visual testing”Start with Visual testing. It explains the ideas both packages share.
- What is visual testing
- How snapshots work
- Comparison and thresholds
- Platforms and CI
- Updating baselines
- Reviewing failures
- Variations
Compare
Section titled “Compare”See how these packages compare with other tools in Compare.
Storybooks
Section titled “Storybooks”The repository’s Storybooks are published with this site:
- Addon Storybook: the Storybook of
storybook-addon-visitself. - Themes: one set of snapshots per theme.
- Multi instances: one set of snapshots per browser viewport.
- CSF Next: stories written in CSF Next.
They only render the stories. Snapshots are taken while Vitest runs them. See Examples.