Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once.

[moimael]

Note from Maintainers

The bug is in React, and it will be fixed in React 15.4.0.
Until React 15.4.0 is out, update all React packages to 15.4.0-rc.4 if you want to try it out.

---

We get this error a lot when trying to test our components.

Not sure where this is coming from.

● Runtime Error
  - Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once.
        at invariant (node_modules/fbjs/lib/invariant.js:38:15)
        at Object.ReactComponentEnvironment.injection.injectEnvironment (node_modules/react/lib/ReactComponentEnvironment.js:43:60)
        at Object.<anonymous> (node_modules/react/lib/ReactTestRenderer.js:130:37)
        at Object.<anonymous> (node_modules/react-test-renderer/index.js:4:18)
        at Object.<anonymous> (src/shared/components/burger-menu/__tests__/burger-menu.test.js:3:52)
        at handle (node_modules/worker-farm/lib/child/index.js:41:8)
        at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
        at emitTwo (events.js:87:13)
        at process.emit (events.js:172:7)
        at handleMessage (internal/child_process.js:695:10)
        at Pipe.channel.onread (internal/child_process.js:440:11)

[cpojer]

This should be fixed with jest-react-native 14.1.1.

[moimael]

I'm not doing any react-native stuff, and I'm not using jest-react-native. Will it be fixed for normal React too ?

[cpojer]

I see, it must be react-dom then. Can you try jest.mock('react/lib/ReactDefaultInjection') and see if that makes it work?

[moimael]

Now it give me this error :

Invariant Violation: getNodeFromInstance: Invalid argument.

[cpojer]

Can you share a repository on GitHub that highlights this error? I'm pretty sure we need to either provide better mocking defaults in Jest or figure out a way for React to not completely blow up when react-dom and react-test-renderer are both required. The problem here isn't a Jest issue, it's that react-dom and the react-test-renderer are both rendering targets for React and right now in React you can only load a single rendering target.

[moimael]

So I was wondering, since none of my component import react-dom, why it would cause the issue. And actually the issue come from an HOC I use : https://github.com/d6u/react-container-query which do import react-dom. And every component who throws this error is wrapped in the applyContainerQuery HOC. I cannot really share repo since it's on our private Github repo but just doing a really simple test with a component wrapped in this HOC would throw the error.

[njpatel]

facebook/react#7386 references the issue too. The submitter provided a test case: https://github.com/NicolasT/react-test-renderer-and-react-dom-incompatible .

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.

[LouisStAmour]

I'm also seeing this caused by https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L7 when I used a bootstrap Modal in my code. Running jest.mock('react/lib/ReactDefaultInjection') "fixed" that error, but when I open/display the modal, I see:

  - TypeError: Cannot read property 'monitorScrollValue' of null
        at Object._assign.ensureScrollValueMonitoring (node_modules/react/lib/ReactBrowserEventEmitter.js:310:50)
        at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:278:30)
        at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:371:32)
        at Object.ReactMount.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (node_modules/react/lib/ReactMount.js:313:23)
        at _renderOverlay (node_modules/react-overlays/lib/Portal.js:84:50)
        at componentDidMount (node_modules/react-overlays/lib/Portal.js:47:10)
        at invokeComponentDidMountWithTimer (node_modules/react/lib/ReactCompositeComponent.js:60:18)
...

I tried avoiding this by adding jest.mock('react/lib/ReactBrowserEventEmitter'); but it doesn't help.

TypeError: Can't add property _hostNode, object is not extensible
        at Object.precacheNode (node_modules/react/lib/ReactDOMComponentTree.js:47:22)
        at Object.ReactMount._mountImageIntoNode (node_modules/react/lib/ReactMount.js:487:29)
        at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:112:14)
        at ReactTestReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
        at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:126:15)
        at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:61:7)
        at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
        at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:285:18)
        at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:371:32)
        at Object.ReactMount.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (node_modules/react/lib/ReactMount.js:313:23)
        at _renderOverlay (node_modules/react-overlays/lib/Portal.js:84:50)
        at componentDidMount (node_modules/react-overlays/lib/Portal.js:47:10)
...

The problem ultimately stems from https://github.com/react-bootstrap/react-overlays/blob/master/src/Portal.js#L74 (which is line 84 in the above stacktrace) called by https://github.com/react-bootstrap/react-overlays/blob/master/src/Portal.js#L28 (aka line 47)

If I try mocking react/lib/ReactMount, I get:

  - TypeError: Cannot read property 'contains' of undefined
        at node_modules/dom-helpers/query/contains.js:8:19
        at focus (node_modules/react-overlays/lib/Modal.js:446:58)
        at onShow (node_modules/react-overlays/lib/Modal.js:388:10)
        at componentDidMount (node_modules/react-overlays/lib/Modal.js:354:12)
...

Which is from the contains function call at https://github.com/react-bootstrap/react-overlays/blob/master/src/Modal.js#L414

[ffxsam]

I'm getting this as well, when using Jest on a project that uses React and Material UI.

[ffxsam]

Here are the only two tests I have:

Link.test.js

import React from 'react';
import renderer from 'react/lib/ReactTestRenderer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Link from '../imports/common-ui/components/Link';

function handleClick() {

}

test('renders some text with an onClick handler', () => {
  const component = renderer.create(
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <Link onClick={handleClick}>Click here</Link>
    </MuiThemeProvider>
  );
  let tree = component.toJSON();

  expect(tree).toMatchSnapshot();
});

ArtistTrackUI.test.js

import React from 'react';
import renderer from 'react/lib/ReactTestRenderer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import ArtistTrackUI from
  '../imports/common-ui/components/Tracks/ArtistTrackUI';

function userAction() {}

test('renders', () => {
  const component = renderer.create(
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <ArtistTrackUI
        duration={120}
        name="Some Track"
        onUserAction={userAction}
        playing={false}
        position={20}
      />
    </MuiThemeProvider>
  );
  let tree = component.toJSON();

  expect(tree).toMatchSnapshot();
});

[LouisStAmour]

Workaround: By using jest.mock('react/lib/ReactDefaultInjection'); with automock turned off, I'm able to get everything running smoothly for tests which don't actually need react-dom. (We get past the load errors.)

For tests that require react-dom, I've duplicated my setup code but replaced import renderer from 'react-test-renderer'; with import { mount } from 'enzyme'; import jasmineEnzyme from 'jasmine-enzyme'; and then with slight modifications -- renaming renderer.create to mount, changing component.toJSON() to component.html(), etc. I'm able to get things up and running. See Enzyme's Full Render API and jasmine-enzyme, which I loaded using the suggested non-Jest beforeEach filter instead of using the Jest-suggested setupTestFrameworkScriptFile so I could run both render functions in different Jest test files at the same time.

[gaearon]

jest.mock('react-dom') should be enough for this.