Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test renderer options #1085

Closed
wants to merge 17 commits into from
Closed

Test renderer options #1085

wants to merge 17 commits into from

Conversation

ndelangen
Copy link
Member

This PR replaces: #896


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 the react-test-renderer create method, for example to allow mocking refs 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 storyshots.test.js 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.

@ndelangen
Copy link
Member Author

@tmeasday Can you review and test this?

@tmeasday
Copy link
Member

Hey @ndelangen

  1. I think you missed a key line in rebasing this PR: jrdrg@af02d80#diff-5c231c3fa2827654dca8a602336f00a9 (I'm guessing it got messed up the merge).

  2. I suspect the solution of providing a single createNodeMock implementation is probably not going to scale to large projects (each story is probably going to want to provide it's own createNodeMock). So I think @theinterned's idea of story metadata in Allow passing options to storiesOf().add() as hook to customizing story behaviour in plugins #993 is probably the way forward on this.

  3. In the meantime, we can use the new test option to achieve the behavior allowed by this PR I think:

import initStoryshots from '@storybooks/addon-storyshots';
import renderer from 'react-test-renderer';

const createNodeMock = () => {
 // ...
]

initStoryShots({
  test({ story, context }) {
    const storyElement = story.render(context, { createNodeMock });
    const tree = renderer.create(storyElement).toJSON();
    expect(tree).toMatchSnapshot();
  }
});

@jrdrg -- I wonder if the above works for you with the latest alpha?

  1. I'll work to bring this test case across to test-cra and prove the above works.

@tmeasday
Copy link
Member

Perhaps the snapshot test-body should be a higher-order function that takes options as an argument and produces a test-body?

@tmeasday
Copy link
Member

I think this can be closed as it's superceded by #1090

@ndelangen ndelangen deleted the test-renderer-options branch May 23, 2017 10:25
@shilman shilman added the misc label May 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants