Allow passing options to react-test-renderer .create() method

.jestrc.json

@@ -3,7 +3,8 @@
   "clearMocks": true,
   "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
+    "@storybook/addons": "<rootDir>/lib/addons/dist/index.js"
   },
   "projects": [
     "<rootDir>/packages/*",

addons/storyshots/package.json

@@ -10,6 +10,7 @@
   "main": "dist/index.js",
   "scripts": {
     "prepublish": "babel ./src --out-dir ./dist",
+    "test": "jest --config ./.jestrc",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -19,7 +20,8 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4"
   },
   "dependencies": {
     "@storybook/addon-actions": "^3.0.0-alpha.0",

addons/storyshots/src/index.js

@@ -11,13 +11,18 @@ let configPath;
 
 const babel = require('babel-core');
 
+function hasDependency(pkg, dependency) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[dependency]) ||
+    (pkg.dependencies && pkg.dependencies[dependency]) ||
+    pkg.name === dependency
+  );
+}
+
 const pkg = readPkgUp.sync().pkg;
-const isStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@storybook/react']) ||
-  (pkg.dependencies && pkg.dependencies['@storybook/react']);
-const isRNStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@storybook/react-native']) ||
-  (pkg.dependencies && pkg.dependencies['@storybook/react-native']);
+
+const isStorybook = hasDependency(pkg, '@storybook/react') || pkg.name === 'storybook';
+const isRNStorybook = hasDependency(pkg, '@storybook/react-native');
 
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
@@ -69,7 +74,7 @@ export default function testStorySnapshots(options = {}) {
           it(story.name, () => {
             const context = { kind: group.kind, story: story.name };
             const renderedStory = story.render(context);
-            const tree = renderer.create(renderedStory).toJSON();
+            const tree = renderer.create(renderedStory, options.rendererOptions).toJSON();
             expect(tree).toMatchSnapshot();
           });
         }

addons/storyshots/stories/__test__/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Component with ref on mount 1`] = `
+<input
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+      "width": "400px",
+    }
+  }
+  type="text"
+  value="This component reads its scrollWidth on load."
+/>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<div
+  style={
+    Object {
+      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "margin": 15,
+      "maxWidth": 600,
+    }
+  }
+>
+  <h1>
+    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
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      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
+      href="#"
+      onClick={[Function]}
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+    >
+      stories
+    </a>
+
+    for a component called
+
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      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
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+     component located at 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      stories/Button.js
+    </code>
+    .)
+  </p>
+  <p>
+    This is just one thing you can do with Storybook.
+    <br />
+    Have a look at the
+
+    <a
+      href="https://github.com/storybooks/storybook"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank"
+    >
+      Storybook for React
+    </a>
+
+    repo for more information.
+  </p>
+</div>
+`;

addons/storyshots/stories/__test__/storyshots.test.js

@@ -0,0 +1,14 @@
+import initStoryshots from '../../src';
+import path from 'path';
+
+function createNodeMock(element) {
+  if (element.type === 'input') {
+    return { scrollWidth: 123 };
+  }
+  return null;
+}
+
+initStoryshots({
+  rendererOptions: { createNodeMock },
+  configPath: path.resolve(__dirname, '../../.storybook'),
+});

addons/storyshots/stories/required_with_context/ComponentWithRef.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const inputStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+  width: '400px',
+};
+
+class ComponentWithRef extends React.Component {
+  componentDidMount() {
+    this.props.onLoad(`scrollWidth: ${this.ref.scrollWidth}`);
+  }
+  setRef(ref) {
+    this.ref = ref;
+  }
+  render() {
+    return (
+      <input
+        type="text"
+        value={'This component reads its scrollWidth on load.'}
+        ref={r => this.setRef(r)}
+        style={inputStyles}
+      />
+    );
+  }
+}
+
+ComponentWithRef.propTypes = {
+  onLoad: PropTypes.func,
+};
+
+export default ComponentWithRef;

addons/storyshots/stories/required_with_context/ComponentWithRef.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf, action } from '@storybook/react';
+import ComponentWithRef from './ComponentWithRef';
+
+storiesOf('Component with ref', module).add('on mount', () => (
+  <ComponentWithRef onLoad={action('component mount')} />
+));