Add renderer option to storyshots

addons/storyshots/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["env", "react"],
+  "presets": ["env", "stage-0", "react"],
   "plugins": [
     "transform-runtime"
   ]

addons/storyshots/README.md

@@ -129,7 +129,51 @@ If you are running tests from outside of your app's directory, storyshots' detec
 
 ### `test`
 
-Run a custom test function for each story, rather than the default (a vanilla snapshot test). See the exports section below for more details.
+Run a custom test function for each story, rather than the default (a vanilla snapshot test). Setting `test` will take precedence over the `renderer` option. See the exports section below for more details.
+
+### `renderer`
+
+Pass a custom renderer (such as enzymes `mount`) to record snapshots.
+
+```js
+import initStoryshots from '@storybook/addon-storyshots';
+import { mount } from 'enzyme';
+
+initStoryshots({
+  renderer: mount,
+});
+```
+
+If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
+You can either pass in a serializer (see below) or specify an enzyme-compatible serializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) as the default `snapshotSerializer` in your config.
+
+Example for jest config in `package.json`:
+```json
+"devDependencies": {
+    "enzyme-to-json": "^3.2.2"
+},
+"jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
+```
+
+### `serializer`
+
+Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data.
+
+```js
+import initStoryshots from '@storybook/addon-storyshots';
+import toJSON from 'enzyme-to-json';
+
+initStoryshots({
+  renderer: mount,
+  serializer: toJSON,
+});
+```
+
+This option only needs to be set if the default `snapshotSerializers` is not set in your jest config.
 
 ## Exports
 
@@ -153,7 +197,7 @@ Like `snapshotWithOptions`, but generate a separate snapshot file for each stori
 
 ### `shallowSnapshot`
 
-Take a snapshot of a shallow-rendered version of the component.
+Take a snapshot of a shallow-rendered version of the component. Note that this option will be overriden if you pass a `renderer` option.
 
 ### `getSnapshotFileName`
 

addons/storyshots/package.json

@@ -31,6 +31,8 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "enzyme-to-json": "^3.2.2",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
     "react": "^16.1.0",

addons/storyshots/src/index.js

@@ -7,7 +7,7 @@ import addons from '@storybook/addons';
 
 import runWithRequireContext from './require_context';
 import createChannel from './storybook-channel-mock';
-import { snapshot } from './test-bodies';
+import { snapshotWithOptions } from './test-bodies';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
 
 export {
@@ -37,7 +37,8 @@ export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
 
   const isStorybook =
-    options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
+    options.framework === 'react' ||
+    (!options.framework && hasDependency('@storybook/react'));
   const isRNStorybook =
     options.framework === 'react-native' ||
     (!options.framework && hasDependency('@storybook/react-native'));
@@ -82,8 +83,13 @@ export default function testStorySnapshots(options = {}) {
   // Added not to break existing storyshots configs (can be removed in a future major release)
   // eslint-disable-next-line
   options.storyNameRegex = options.storyNameRegex || options.storyRegex;
+  const snapshotOptions = {
+    renderer: options.renderer,
+    serializer: options.serializer,
+  };
   // eslint-disable-next-line
-  options.test = options.test || snapshot;
+  options.test =
+    options.test || snapshotWithOptions({ options: snapshotOptions });
 
   // eslint-disable-next-line
   for (const group of stories) {
@@ -105,7 +111,10 @@ export default function testStorySnapshots(options = {}) {
 
           it(story.name, () => {
             const context = { fileName, kind, story: story.name };
-            return options.test({ story, context });
+            return options.test({
+              story,
+              context,
+            });
           });
         }
       });

addons/storyshots/src/test-bodies.js

@@ -1,11 +1,13 @@
-import renderer from 'react-test-renderer';
+import reactTestRenderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
 import 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';
 
-function getRenderedTree(story, context, options) {
+function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
+  const currentRenderer = renderer || reactTestRenderer.create;
   const storyElement = story.render(context);
-  return renderer.create(storyElement, options).toJSON();
+  const tree = currentRenderer(storyElement, rendererOptions);
+  return serializer ? serializer(tree) : tree;
 }
 
 export const snapshotWithOptions = options => ({ story, context }) => {
@@ -27,13 +29,14 @@ export const multiSnapshotWithOptions = options => ({ story, context }) => {
 
 export const snapshot = snapshotWithOptions({});
 
-export function shallowSnapshot({ story, context }) {
-  const shallowRenderer = shallow.createRenderer();
-  const result = shallowRenderer.render(story.render(context));
-  expect(result).toMatchSnapshot();
+export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
+  const shallowRenderer = renderer || shallow.createRenderer();
+  const tree = shallowRenderer.render(story.render(context));
+  const serializedTree = serializer ? serializer(tree) : tree;
+  expect(serializedTree).toMatchSnapshot();
 }
 
 export function renderOnly({ story, context }) {
   const storyElement = story.render(context);
-  renderer.create(storyElement);
+  reactTestRenderer.create(storyElement);
 }

addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  className="css-1fqbdip"
+>
+  <h1
+    className="css-nil"
+  >
+    Welcome to storybook
+  </h1>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+
+    <code
+      className="css-mteq83"
+    >
+      src/stories
+    </code>
+
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+
+    <a
+      className="css-ca0824"
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </a>
+
+    for a component called
+
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      className="css-mteq83"
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+
+    <a
+      className="css-ca0824"
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+
+    section in our documentation.
+  </p>
+  <p
+    className="css-bwdon3"
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+
+    <code
+      className="css-mteq83"
+    >
+      .storybook/webpack.config.js
+    </code>
+
+    to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;

addons/storyshots/stories/storyshot.enzyme.test.js

@@ -0,0 +1,11 @@
+import path from 'path';
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import initStoryshots from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  renderer: mount,
+  serializer: toJSON,
+});

addons/storyshots/stories/storyshot.test.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import initStoryshots, { multiSnapshotWithOptions } from '../src';
 
+// with react-test-renderer
 initStoryshots({
   framework: 'react',
   configPath: path.join(__dirname, '..', '.storybook'),

yarn.lock

@@ -4334,7 +4334,7 @@ enzyme-matchers@^4.0.1:
   dependencies:
     deep-equal-ident "^1.1.1"
 
-enzyme-to-json@^3.0.0:
+enzyme-to-json@^3.0.0, enzyme-to-json@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.2.2.tgz#110047c68dda97aaeb7af3cee7d995fe3d17e82a"
   dependencies:
@@ -14649,4 +14649,4 @@ yn@^2.0.0:
 
 zone.js@^0.8.14:
   version "0.8.18"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.18.tgz#8cecb3977fcd1b3090562ff4570e2847e752b48d"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.18.tgz#8cecb3977fcd1b3090562ff4570e2847e752b48d"