Pass options to test renderer

[theinterned]

Issue:

When running storyshots with a story for a component that uses refs, it will throw a null reference error (see facebook/react#7371)

What I did

This PR adds the ability to pass options to a story's render function.

Specifically, a createNodeMock function can be passed through story.render.options.createNodeMock to react-test-renderer. This allows refs to be mocked as per https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

How to test

Run yarn test - ComponentWithRef.stories.js should use the createNodeMock function defined in ComponentWithRef.stories.js:5 to mock its ref and not fail with a null reference error. The story for ComponentWithRef attempts to get the scrollWidth of a div when the component mounts.

Thanks

With thanks to @jrdrg for the inspiration here: storybookjs/storybook#896

Note

I am submitting this to the deprecated StoryShots repo as tests don't run in the StoryShots package in the Storybook mono repo. I hope to re-submit this PR to the mono repo when 3.0 is released (or as soon as test running is fixed in the StoryShots package)

[JaKXz]

This PR is straight 🔥

[JaKXz]

Perhaps plain JS functions would be better here for hoisting and/or readability reasons.

[theinterned]

I don't think hoisting is an issue here as getTestRenderOptions is defined before use in the exported testStorySnapshots function.

http://codepen.io/theinterned/pen/ZKeayj?editors=0010

[JaKXz]

You could drop this whitespace change for a smaller diff :)

[theinterned]

very true. I'll fix that up

[JaKXz]

Does this project use React v15.5? If so it should bring in prop-types separately [and if not ignore this]

[theinterned]

Yeah the storybooks/storyshots repo is running at "react": "^15.4.1". I didn't want to update dependencies and stuff here as the repo is deprecated ...

[tmeasday]

@theinterned could we avoid complex changes, and just leverage a custom test function with something like:

// in the story, wrap with a "box"
storiesOf(...)
  .add((
    <RenderWithOptions createNodeMock={...}>
       <ComponentWithRef .../>
    </RenderWithOptions>
  ));

// when setting up storyshots, provide a custom test function
initStoryshots({
  test(renderedStory) {
    let options = {};
  
    // XXX untested psuedo-code but you get the idea
    if (renderedStory.displayType === 'RenderWithOptions') {
      renderedStory = renderedStory.children;
      options = renderedStory.props;
    }

    const tree = renderer.create(renderedStory, options).toJSON();
    expect(tree).toMatchSnapshot()
  }
});

Then someone could make a simple package that exports the RenderWithOptions and custom test function.

Proposal for test function buried in here: storybookjs/storybook#917

[theinterned]

@tmeasday I like where you are going with the custom test function. It might make more sense to just call that a render function though? Really what its doing is adding some custom logic wrapped around the rendering of the story right?

Maybe lifecycle methods like storyWillMount and storyDidMount?

[theinterned]

@tmeasday my other comment is that being able to pass options to the add method would still be useful and would make use cases like this one about mocking refs, or something like adding categories more easily achievable.

[theinterned]

Okay, I've made a proposal for a generic solution to adding stories: storybookjs/storybook#993