Merge pull request #1090 from storybooks/component-with-ref-example

Added `snapshotWithOptions` to allow configuring rendering options in Storyshots

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

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;

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

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={

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;

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

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,
+  }),
 });