React: Context support for react-test-renderer

[paulyoung]

Do you want to request a _feature_ or report a _bug_?
This is a feature request.

What is the current behavior?
There doesn't appear to be a way to pass context when calling renderer.create

I'm attempting to use snapshot testing in Jest with a component that uses react-intl. If I could provide context, I could create a similar helper function to those for enzyme.

What is the expected behavior?
Be able to provide a context, similar to shallowRenderer.render: https://github.com/facebook/react/issues/3721

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I'm using React 15.13.2 and haven't tried any previous versions of React.

[gaearon]

Technically you can pass context just like you do normally in React, can you not? Wrap the rendered element into an element of the context providing component. The shortcut offered by Enzyme is just that, a shortcut, but you should be able to pass context down using regular React API.

[paulyoung]

I prefer to use these shortcuts, and in this case I also ran into a problem when trying to use IntlProvider (the context-providing component)

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

[gaearon]

This looks like you have a duplicate React in the bundle, could that be the case?

[paulyoung]

I don't _think_ so, but I found some other issues in which people are saying they've seen this because of npm link. That could explain things here, so I'll try without.

[gaearon]

If you npm link to some folder that has own react in its node_modules, you'll get a duplicate React.

[paulyoung]

Thanks for confirming. We're currently using Lerna and webpack, so maybe something is up with our webpack module resolution config.

[gaearon]

I'm going to close since technically you can already pass context (via usual means, that is, with a wrapping component), and the error you see appears to be related to module resolution rather than to React.

[cjolif]

Coming back on this "old" one. The entire purpose of unit testing is to test just an isolated component. Obviously as soon as the component depends on a context, it can't be purely isolated. But still having to setup my own wrapping component, may it just be here to set the context, is a bit counter-intuitive to me in the context of unit testing. I guess it would really be nice if react-test-renderer would actually allow me to get rid of this step.

[tkrotoff]

@gaearon

Wrap the rendered element into an element of the context providing component

Can you provide an example?

[ErrorPro]

@tkrotoff
You can write your own wrapper(context provider) and pass as context whatever you want. Here is an example for the old context.

class ContextProvider extends React.Component {
  static childContextTypes = {
    myContext: PropTypes.object,
  }

  getChildContext = () => ({
    myContext: {
      test: 2,
    },
  })

  render() {
    return this.props.children;
  }
}

Later you just wrap a component you want to test(that one which needs context) by this ContextProvider like this:

it('renders correctly', () => { const tree = renderer .create( <ContextProvider> <MyComponentWhichUsesMyContext /> </ContextProvider> ) .toJSON(); expect(tree).toMatchSnapshot(); })

[JordynMarcellus]

@ErrorPro Just used this to solve a problem I was having in an ooooold react 15 codebase I just started working with -- thanks a ton!