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
- Updated packages and tried to run test but it fails because of https://github.com/facebook/jest/issues/1353 Snapshot testing is in standby for now. — committed to springload/springtunes by vincentaudebert 8 years ago
@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:
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 asnext
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:
From https://github.com/facebook/jest/issues/1353#issuecomment-249906262:
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 :