@nulogy/storyshots

StoryShots

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

---

This repo has been deprecated because it's now included in https://github.com/storybooks/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'
});

storyRegex

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

initStoryshots({
  storyRegex: /buttons/
});

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

Mocking refs

If you use refs in your components, you may encounter the error:

TypeError: Cannot read property '<someProperty>' of null

To fix this, you will need to mock refs.

You can pass a createNodeMock as an option on your story's render function:

const createNodeMock = element => (element.type === 'input') ? { someProperty: 123 } : null

const mockedRefStory = () => (
  <ComponentWithRef onLoad={action('component mount')} />
)
mockedRefStory.options = { createNodeMock }

storiesOf('Component with ref', module).add('on mount', mockedRefStory)