Visual Testing

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.

To make Wingsuit work with visual regression tests you can configure the seed of the faker plugin with the environment STORYBOOK_WINGSUIT_FAKER_SEED. The seed must be a numeric value.

With a configured seed the faker plugin will generate the same faked values. So a visual testing tool won't detect text changes any more.

Here an example to export your patterns to chromatic with the same faker values:

"chromatic": "cross-env-shell STORYBOOK_WINGSUIT_FAKER_SEED=4242 \"npx chromatic --project-token TOKEN\""
Storybook visual testing documentation
Chromatic, great visual testing service made by Storybook
Storybook addon storyshots