Skip to content
Generate Jest snapshots from existing storybooks (similar to storyshots).
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
__mocks__
example/components/PrettyCode
.babelrc
.gitignore Ignore npm-debug.log Dec 4, 2016
.jestrc
.nvmrc
LICENSE
README.md
jest.png
package.json
storybook.png
yarn.lock

README.md

jest-storybook

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.

Rationale

Stories

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. styles.foo).

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());

          expect(component.toJSON()).toMatchSnapshot();
        });
      });

      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.

License

MIT License 2016 © Eric Clemmons

You can’t perform that action at this time.