From b915b5439786e0edb17d7f5ab404bba9f7919381 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Mon, 22 May 2017 15:25:58 +1000
Subject: [PATCH 1/2] Added a `snapshotWithOptions` test body and example

See for instance https://github.com/storybooks/storybook/pull/896/ -- it's a common problem to need mocked nodes.

This solution is probably a bit of a bandaid, as large projects would probably want to set options per-story, this is a lot better than nothing in the meantime.
---
 addons/storyshots/src/index.js                      |  2 +-
 addons/storyshots/src/test-bodies.js                |  8 +++++---
 .../src/__snapshots__/storyshots.test.js.snap       |  2 ++
 examples/test-cra/src/stories/ComponentWithRef.js   | 13 +++++++++++++
 examples/test-cra/src/stories/index.js              |  3 +++
 examples/test-cra/src/storyshots.test.js            | 12 +++++++++++-
 6 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 examples/test-cra/src/stories/ComponentWithRef.js

diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index 2a6f80c20702..6c5f9ab39bce 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -6,7 +6,7 @@ import createChannel from './storybook-channel-mock';
 import { snapshot } from './test-bodies';
 const { describe, it, expect } = global;
 
-export { snapshot, renderOnly } from './test-bodies';
+export { snapshotWithOptions, snapshot, renderOnly } from './test-bodies';
 
 let storybook;
 let configPath;
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index 0da64358a671..2f7bfb694ae4 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -1,11 +1,13 @@
 import renderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
 
-export function snapshot({ story, context }) {
+export const snapshotWithOptions = options => ({ story, context }) => {
   const storyElement = story.render(context);
-  const tree = renderer.create(storyElement).toJSON();
+  const tree = renderer.create(storyElement, options).toJSON();
   expect(tree).toMatchSnapshot();
-}
+};
+
+export const snapshot = snapshotWithOptions({});
 
 export function renderOnly({ story, context }) {
   const storyElement = story.render(context);
diff --git a/examples/test-cra/src/__snapshots__/storyshots.test.js.snap b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap
index 175d0e1be3a0..572220639b8c 100644
--- a/examples/test-cra/src/__snapshots__/storyshots.test.js.snap
+++ b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap
@@ -38,6 +38,8 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots ComponentWithRef basic 1`] = `<div />`;
+
 exports[`Storyshots Welcome to Storybook 1`] = `
 <div
   style={
diff --git a/examples/test-cra/src/stories/ComponentWithRef.js b/examples/test-cra/src/stories/ComponentWithRef.js
new file mode 100644
index 000000000000..7fe99ad48767
--- /dev/null
+++ b/examples/test-cra/src/stories/ComponentWithRef.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class ComponentWithRef extends Component {
+  componentDidMount() {
+    // Read the scroll width off the DOM element
+    console.log(this.ref.scrollWidth);
+  }
+  render() {
+    return <div ref={r => (this.ref = r)} />;
+  }
+}
+
+export default ComponentWithRef;
diff --git a/examples/test-cra/src/stories/index.js b/examples/test-cra/src/stories/index.js
index 87e31def937b..79d7e578671e 100644
--- a/examples/test-cra/src/stories/index.js
+++ b/examples/test-cra/src/stories/index.js
@@ -6,9 +6,12 @@ import { linkTo } from '@storybook/addon-links';
 
 import Button from './Button';
 import Welcome from './Welcome';
+import ComponentWithRef from './ComponentWithRef';
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+
+storiesOf('ComponentWithRef', module).add('basic', () => <ComponentWithRef />);
diff --git a/examples/test-cra/src/storyshots.test.js b/examples/test-cra/src/storyshots.test.js
index d0d7df609c9d..51cce11163f0 100644
--- a/examples/test-cra/src/storyshots.test.js
+++ b/examples/test-cra/src/storyshots.test.js
@@ -1,7 +1,17 @@
-import initStoryshots from '@storybook/addon-storyshots';
+import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
 import path from 'path';
 
+function createNodeMock(element) {
+  if (element.type === 'div') {
+    return { scrollWidth: 123 };
+  }
+  return null;
+}
+
 initStoryshots({
   framework: 'react',
   configPath: path.join(__dirname, '..', '.storybook'),
+  test: snapshotWithOptions({
+    createNodeMock,
+  }),
 });

From 0644b216b317f3d25676ce944695d9f3e228d707 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Mon, 22 May 2017 15:27:45 +1000
Subject: [PATCH 2/2] Added some docs

---
 addons/storyshots/README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index d920613b7008..6a707774ccf9 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -116,3 +116,8 @@ The default, render the story as normal and take a Jest snapshot.
 ### `renderOnly`
 
 Just render the story, don't check the output at all (useful if you just want to ensure it doesn't error).
+
+
+### `snapshotWithOptions(options)`
+
+Like the default, but allows you to specify a set of options for the test renderer. See for example: https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16