Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once. #1353
Comments
|
This should be fixed with jest-react-native 14.1.1. |
|
I'm not doing any react-native stuff, and I'm not using jest-react-native. Will it be fixed for normal React too ? |
|
I see, it must be react-dom then. Can you try |
|
Now it give me this error : |
|
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. |
|
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. |
|
facebook/react#7386 references the issue too. The submitter provided a test case: https://github.com/NicolasT/react-test-renderer-and-react-dom-incompatible .
|
|
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 I tried avoiding this by adding 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 Which is from the |
|
I'm getting this as well, when using Jest on a project that uses React and Material UI. |
|
Here are the only two tests I have: Link.test.jsimport 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.jsimport 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();
}); |
|
Workaround: By using For tests that require |
|
|
|
(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.) |
|
With Edit: Enzyme's mount "just works" except when my code is asking for layout dimensions of obviously unrendered components. Further mocking seems to be required in each case. |
Enzyme’s
If you look at the stack trace, you will see that it fails because it calls DOM APIs (namely |
|
Oh, and another workaround in the meantime would be to mock the component that uses those DOM APIs (in your case, |
|
Thanks @gaearon - I tried the mock route before commenting. I'm not sure what I'm doing wrong, I've tried mocking |
|
I was able to get it working thanks to extensive use of a debugger and conditional breakpoints, with the following line. No idea why it wasn't working before, maybe it's because I'm using ES6 function shorthand, or maybe it was the lack of As to the rest, it appears I'm using too much state and not enough props for me to interact with the shallow rendered output of |
Some component you use imports |
|
Yeah we should really come up with documentation for this and maybe even add error messages to React that point you to what you need to do to avoid the errors. |
|
I just ran into the same issue, and a search brought me to @cpojer's |
|
There is a workaround and the next version of React won't have this problem. |
|
(For future readers: probably not 15.3.1 but 15.4.0 might have this fix.) |
|
confirming 15.3.1 still has this problem |
|
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. |
|
But the test-renderer doesn't have any way to simulate a click, the only way is to call the props. But what if a component is handling a click on an element to update the internal state and change the rendering based on that? |
|
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 |
|
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) |
|
just cloned a fresh copy, after npm i running npm test got |
|
The problem will be fixed in React 15.4.0, but it is not released yet. |
|
@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 |
|
Using |
|
Have you had a chance to read my comments above? From #1353 (comment):
From #1353 (comment):
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. Cheers! |
|
@gaearon Skimmed over the most important comment 😑. Sorry about that. |
|
No worries. Let me add this to the top post so less people miss it. |
|
After updating to react My test is quite simple: |
|
@matheus208 you need to use the new version of |
…/jest#1353 Snapshot testing is in standby for now.
|
This was fixed in React 15.4.0 which is out today. |
|
Hey @gaearon. I'm facing this same issue when I try to mount a component using react 15.6. I'm getting the message: When I run the with the component: React version: "react": "^15.6.1" |
|
@kaiomagalhaes Why is this the same issue? The message in #1353 (comment) looks very different to me. In your case I think using |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
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.4if 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.
The text was updated successfully, but these errors were encountered: