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

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)

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 54 (21 by maintainers)

Commits related to this issue

Most upvoted comments

@countoren

The problem will be fixed in React 15.4.0, but it is not released yet. I believe this is mentioned in the thread above so feel free to read through it!

A workaround to use both enzyme (with react-dom) and react-test-renderer in one file is:

beforeEach(() => jest.resetModules());

test('react-dom', () => {
  const React = require('react');
  const enzyme = require('enzyme');
  // write your test with enzyme
});

test('react-test-renderer', () => {
  const React = require('react');
  const renderer = require('react-test-renderer');
  // write your test with react-test-renderer
});

This will give you fresh copies of React for every test.

confirming 15.3.1 still has this problem

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

This was fixed in React 15.4.0 which is out today.

What is a click in an environment that is a fake implementation of the DOM? It is simply a function call, so calling a prop called onClick is exactly the same.

@shanecav thanks for your suggestion!

just in case anyone is blocked by this issue. enzyme-to-json as an alternative to react-test-renderer works like a charm!

You should be able to try React 15.4.0-rc.4 (be sure to bump all packages). If you have issues please report them in https://github.com/facebook/react/issues/7770.

If anyone else is trying to do Jest snapshots and enzyme tests in the same file, I started using enzyme-to-json as an alternative to react-test-renderer and it’s been working great. (@tleunen)

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

(For future readers: probably not 15.3.1 but 15.4.0 might have this fix.)

There is a workaround and the next version of React won’t have this problem.

@matheus208 you need to use the new version of react-test-renderer too (set as next tag like React).

I don’t see the value in that. Once the test-renderer has a find API there is little value in using enzyme for this kind of testing. The React team is working on it.

@iam-peekay we do not recommend mocking any internal module for React. It’s very likely doing so will cause strange issues like what you’re seeing. This should be resolved in 15.4.0 though!

@DarrylD

Have you had a chance to read my comments above?

From https://github.com/facebook/jest/issues/1353#issuecomment-254761524:

You should be able to try React 15.4.0-rc.4 (be sure to bump all packages).

From https://github.com/facebook/jest/issues/1353#issuecomment-249906262:

The problem will be fixed in React 15.4.0, but it is not released yet.

It is not expected to be fixed in Jest 17 because it is not a bug in Jest.

The bug is in React, and it will be fixed in React 15.4.0. You can already install React 15.4.0-rc.4 if you want to try it out.

Cheers!

@tleunen the easiest way is to keep tests that utilize packages dependant on react-dom in a separate file from tests that use react-test-renderer. Not ideal, but it should avoid this for now.

Otherwise, @cpojer I think you once mentioned using jest.resetModuleRegistry to get this working in one file? Not sure if you recommend actually doing that though.

(I’m not saying it’s good though—this requirement is confusing and should ideally be fixed, or at least documented, on the React side.)

Now it give me this error :

Invariant Violation: getNodeFromInstance: Invalid argument.