StoryShots adds automatic Jest Snapshot Testing for Storybook.
This addon works with Storybook for: React and React Native.
To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing.
Add the following module into your app.
npm install --save-dev @storybook/addon-storyshots
Usually, you might already have completed this step. If not, here are some resources for you.
- If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension
.test.js
. - Otherwise check this Egghead lesson.
Create a new test file with the name Storyshots.test.js
. (Or whatever the name you prefer).
Then add following content to it:
import initStoryshots from 'storyshots';
initStoryshots();
That's all.
Now run your Jest test command. (Usually, npm test
.) Then you can see all of your stories are converted as Jest snapshot tests.
By default, Storyshots assumes the config directory path for your project as below:
- Storybook for React:
.storybook
- Storybook for React Native:
storybook
If you are using a different config directory path, you could change it like this:
initStoryshots({
configPath: '.my-storybook-config-dir'
});
By default, Storyshots groups stories inside a Jest test suit called "Storyshots". You could change it like this:
initStoryshots({
suit: 'MyStoryshots'
});
If you'd like to only run a subset of the stories for your snapshot tests based on the story's kind:
initStoryshots({
storyKindRegex: /^MyComponent$/
});
This can be useful if you want to separate the snapshots in directories next to each component. See an example here.
If you'd like to only run a subset of the stories for your snapshot tests based on the story's name:
initStoryshots({
storyNameRegex: /buttons/
});