With Snapshot testing, we keep a file copy of the structure of UI components.Think of it like a set of HTML sources.

Then, after we’ve completed any UI changes, we compare new snapshots with the snapshots that we kept in the file.

If things are not the same, we can do two things:

is our integration between Storybook and Jest Snapshot Testing.It’s pretty simple to use.

First, make sure you are inside a Storybook-enabled repo (make sure it has few stories).Then, install StoryShots into your app with:

Then, assuming you are using Jest for testing, you can create a test file that contains the following:

This will save the initial set of snapshots inside your Storybook config directory.

After you complete any changes, you can run the test again and find all structural changes.

StoryShots also comes with a variety of customization options. Have a look at the StoryShots for more information.