`injectEnvironment` called twice: `react-test-renderer` and `react-dom`

[NicolasT]

Trying to test a very simple React component using Material-UI through Jest and react-test-renderer, I'm stuck because ReactCompositeComponent: injectEnvironment() can only be called once.

It looks like react-test-renderer calls injectEnvironment, but so does react-dom, which is (in my actual application) imported somewhere within a Material-UI module which is in turn imported by my component code.

This may not really be a 'bug' in React or react-test-renderer per se, though one could imagine other dependencies somehow loading react-dom as well, causing the same issue.

I created a test-case at https://github.com/NicolasT/react-test-renderer-and-react-dom-incompatible which may provide some more context.

react: 15.3.0
react-dom: 15.3.0
react-test-renderer: 15.3.0

[picodoth]

@NicolasT, I see the same issue. Seems like related to the change made in react @ 15.3.0, I downgrade react to 15.2.1 and the problem got solved. injectEnvironment() was called in 15.3.0 but not in 15.2.1.

[gaearon]

This happens because the tool is assuming ReactDOM would be mocked out.
For example, with Jest, you could write:

jest.mock('react-dom');

to prevent this.

Ideally this shouldn’t be happening in the first place but there is more work to be done before we can avoid this.

[ginter]

any other solutions for this? Mocking react-dom is giving me another error. I believe bc enzyme uses it.

[gaearon]

Maybe @cpojer could offer some insight. I think it should be possible to mock react-dom in one file but not the other, but it’s not clear to me from Jest docs what the “scope” of jest.mock is, and how to limit it to one file (or is it always limited?).

[sophiebits]

I think it's always limited to one file.

[blainekasten]

So I just looked into this a bit more. It seems that react-test-renderer and enzyme are not compatible due to this issue. In enzyme we do load react-dom and hook it up. Sure, jest could mock it, but other test frameworks might not be able to?

Additionally, i would assume people would want their snapshot tests next to their other tests. Currently that is not possible due to the above mentioned. Both renderers try to inject. Here's a type of test I would expect someone would want to write and couldn't at the moment.

import React from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';

class MyComponent extends React.Component {
  state = { active: true };

  render() {
    return (
      <div onClick={() => this.setState({active: !this.state.active}) }>
        Component is {this.state.active}
      </div>
   );
  }
}

describe('MyComponent', () => {
  it('matches snapshot', () => {
    const tree = renderer.create(<MyComponent />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('updates state on click', () => {
    const wrapper = mount(<MyComponent />);
    wrapper.find('[onClick]').simulate('click');

    expect(wrapper).toHaveState('active', false);
  });
});

Is there anything I can do to help make this compatible? I'm just not sure what the solution you guys are looking for is.

[sophiebits]

Yes, this is a limitation right now; you can't use ReactDOM and ReactTestRenderer in the same file unfortunately.

[aweary]

Are there any plans to resolve that conflict or is it just something the community needs to be aware of? It seems like ReactTestRenderer would have to work with ReactComponentBrowserEnvironment or the injection invariant would have to be removed or skirted somehow (allowing environments to be replaced).