Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

License

Releases

No releases published

Packages

No packages published