Snapshot tests compare the rendered markup of every story against known baselines. It’s an easy way to identify markup changes that trigger rendering errors and warnings.
Storybook is a convenient tool for snapshot testing because every story is essentially a test specification. Any time you write or update a story you get a snapshot test for free.
Install the addon. Make sure the version of Storyshots and your project’s Storybook version are identical.
Configure Storyshots by adding the following test file to your project:
You can name the file whatever you like as long as it's picked up by Jest (note that you'll need Jest to be setup already in your project).
Run your first test. Storyshot will recognize all your CSF files (based on
.storybook/main.js) and produces snapshots.
If you are loading stories via
require.context(), you will need to follow some extra steps to ensure Jest finds them. Read more in the addon documentation.
This will create an initial set of snapshots inside your Storybook config directory.
When you make changes to your components or stories, run the test again to identify the changes to the rendered markup.
If the changes are intentional we can accept them as new baselines. If the changes are bugs, fix the underlying code then run the snapshot tests again.
Storyshots has many options for advanced use cases; read more in the addon’s documentation.
Snapshot vs visual tests
Visual tests take screenshots of stories and compare them against known baselines. When used to test appearance, visual tests are often a more robust solution than snapshot tests because verifying markup doesn’t test for visual changes.