GitHub

What if we could combine #JEST snapshot testing with #ReactJS Storybook. That's StoryShots -

  • You could also update your original NPM script, according to the following instead.
  • StoryShots comes with few other minor features.
  • Snapshot testing for React Storybook
  • Instead of using our loaders, you could use a set of loaders you want.
  • StoryShot doesn’t use an actual browser, to run your code.

storyshots – Snapshot testing for React Storybook

@arunoda: What if we could combine #JEST snapshot testing with #ReactJS Storybook. That’s StoryShots –

Snapshot Testing for React Storybook

With StoryShots, you could use your existing Storybook stories, as the input for snapshot testing. We do it by integrating Jest’s snapshot testing support, directly into Storybook.

Read This: Snapshot Testing in React Storybook

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

Then add the following NPM module into your app.

Then, add a NPM script as follows:

“scripts” : { “test-storybook” : “storyshots” }

Then, run the following command:

After that, you can see an output like this:

This will create a set of snapshots, inside your Storybook config directory. You could publish them into GIT.

Once you did a UI change, you could run StoryShots again with:

Then, you can see changes with a diff view, like the following:

If these changes are intentional, you could update snapshots with:

If not, you could try to correct it and re-run the above command.

StoryShots comes with some few features which help you to be productive and customize it, to suit your project.

When you have a lot of UI changes, it’s a good idea to check and update them, one by one. That’s where our interactive mode comes in. Run the following command:

It’s pretty useful to watch files and re-run StoryShots again. You can do that with the

-w

flag.

You may don’t want to storyshot each and every of your stories. If so, you could grep which stories you want to storyshot, by invoking the

-g

option:

When we are running your stories, we don’t use Webpack. So, we can’t import files other than

.js

and

. This means actually, that we can’t import your

and

files.

In order to fix this issue, we provide some mock loaders for few of the most common file types. Here are they.

But, we can’t add all the loaders you might use. So, we allow you to customize it. Instead of using our loaders, you could use a set of loaders you want.

For that, first create a file called

in your project root. Then add support to few loaders like this:

var loaders = module.exports = {}; // to support css modules loaders[‘.css’] = function(path) { return {}; }; // to support jpeg files loaders[‘.jpeg’] = function(path) { return path; }

Then, run StoryShots like this:

StoryShot doesn’t use an actual browser, to run your code. Since your UI components may use browser features, we try to create a minimal browser environment with JSDom and with some common polyfills.

You can see them here.

But, you may also use some other browser features. Then, we allow you to add custom polyfills, replacing our own config. Create a file like this with your own polyfills.

Then, run StoryShots like this:

Beside these main features, StoryShots comes with few other minor features. You could see them by looking at the help:

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub