Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Generate Jest snapshots from existing storybooks (similar to storyshots).

Note: this isn't a library, but a set of instructions + code to do this yourself. If a wortwhile abstraction arises, I'll publish it accordingly.



Storybook is an extremely powerful & productive way to build React components. They're effectively tests, so it makes sense to version them along with the rest of your test-suite.

Storyshots are Kadira's answer to this, but don't use Jest under the hood, so you miss out on Jest's mocking capabilities.

Luckily, it's fairly trivial for Jest to snapshot stories itself.

How To Snapshot Stories

  1. Install Jest.
yarn add --dev jest
# or
npm install --save-dev jest
  1. Add React support to Jest.
yarn add --dev babel-jest react-test-renderer
# or
npm install --save-dev babel-jest react-test-renderer
  1. Modify your package.json scripts.test to run jest:
  "test": "jest --config .jestrc"

Note: .jestrc may be implicitly used in the future.

  1. Mock out non-JS files (e.g. .css) & @kadira/storybook in .jestrc:
  "moduleNameMapper": {
    "\\.(css)$": "<rootDir>/__mocks__/.$1.js",
    "^@kadira/storybook$": "<rootDir>/__mocks__/@kadira/storybook"

Libraries like react-codemirror require importing CSS files, which will throw exceptions within Jest.

If you're using CSS Modules, consider identity-obj-proxy, which will let you easily reference properties (e.g.

Note: Until facebook/jest#1774 & facebook/jest#462 are resolved, namespaced mock packages must be explicitly listed.

  1. Create __mocks__/.css.js:
module.exports = __filename.replace(process.cwd(), "~");

CSS files are replaced with their relative path, so tests don't break in CI.

  1. Create __mocks__/@kadira/storybook.js:
import renderer from "react-test-renderer";

// Mocked version of `import { action } from "@kadira/storybook"`.
export const action = (actionName) => jest.fn();

// Mocked version of `import { storiesOf } from "@kadira/storybook"`.
export const storiesOf = (groupName) => {
  // Mocked API to generate tests from & snapshot stories.
  const api = {
    add(storyName, story) {
      describe(groupName, () => {
        it(storyName, () => {
          const component = renderer.create(story());


      return api;

    // Any `storybook-addon-*` packages may require noop-ing them:
    addDecorator() {
      return api;

  return api;

Note: Once facebook/jest#2094 is released, you can customize snapshot names!

  1. Move *.stories.js Under __tests__.
diff --git a/example/components/PrettyCode/index.stories.js b/example/components/PrettyCode/__tests__/index.stories.js
similarity index 97%
rename from example/components/PrettyCode/index.stories.js
rename to example/components/PrettyCode/__tests__/index.stories.js
index 4e348a6..1b83680 100644
--- a/example/components/PrettyCode/index.stories.js
+++ b/example/components/PrettyCode/__tests__/index.stories.js

Jest will automatically discover & run any .js files under __tests__.

  1. Run Tests.

Passing tests

Running This Example

  1. Clone this project.
  2. yarn or npm install.
  3. npm start (http://localhost/3000) or run npm test.


MIT License 2016 © Eric Clemmons


Generate Jest snapshots from existing storybooks (similar to storyshots).




No releases published


No packages published