StoryShots

Jest Snapshot Testing for Storybook. (Supports both React and React Native Storybook)

With StoryShots, you could use your existing Storybook stories as the input for Jest Snapshot Testing.

Now, we don't ship a CLI tool for storyshots. Check version 2.x for that.

Getting Started

First of all, you need to use the latest version of React Storybook. So, do this:

npm update @kadira/storybook

Then add the following NPM module into your app.

npm i -D storyshots

Configure your app for Jest

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.

Configure Storyshots

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.

Options

configPath

By default Storyshots assume the default config directory path for your project as below:

• For React Storybook: .storybook
• For React Native Storybook: storybook

If you are using a different config directory path, you could change it like this:

initStoryshots({
  configPath: '.my-storybook-config-dir'
});

suit

By default, we group stories inside Jest test suit called "Storyshots". You could change it like this:

initStoryshots({
  suit: 'MyStoryshots'
});

storyKindRegex

If you'd like to only run a subset of the stories for your snapshot tests based on the story 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.

storyNameRegex

If you'd like to only run a subset of the stories for your snapshot tests based on the story name:

initStoryshots({
  storyNameRegex: /buttons/
});

Here is an example of a regex which does not pass if "Relay" is in the name: /^((?!(r|R)elay).)*$/.