Create-react-app: Error on tests when Enzyme is added

[pedro-stanaka]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes;

Which terms did you search for in User Guide?

I searched about testing, about enzyme and on the troubleshooting page as well.

Environment

1. node -v: v6.11.3
2. npm -v: 4.6.1
3. yarn --version (if you use Yarn): 1.1.0
4. npm ls react-scripts (if you haven’t ejected): [email protected]

Then, specify:

1. Operating system: Windows

Steps to Reproduce

1. npm install -g create-react-app
2. create-react-app test-jest-enzyme
3. cd test-jest-enzyme
4. Change file src/App.test.js to be:

import React from 'react';
import App from './App';
import {shallow} from "enzyme";

it('renders without crashing', () => {
    shallow(<App />);
});

1. npm test

Expected Behavior

The tests would pass and no exception would be thrown.

Actual Behavior

Will give:
```` Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should callEnzyme.configure({ adapter: new Adapter() }) before using any of Enzyme's top level APIs, whereAdapter` is the adapter
corresponding to the library currently being tested. For example:

      import Adapter from 'enzyme-adapter-react-15';

      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html


  at validateAdapter (node_modules/enzyme/build/validateAdapter.js:14:11)
  at Object.<anonymous>.it (src/App.test.js:6:25)

`````

Reproducible Demo

https://gitlab.com/DevLearn/jest-react-broken

[gaearon]

Yes, Enzyme 3 has some breaking changes.
Please read their announcement:

https://github.com/airbnb/enzyme#upgrading-from-enzyme-2x-or-react--16

If you use Create React App, you can put the configure() call into src/setupTests.js.

[nabiltntn]

Is it possible to apply this configuration one time or we must call

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

in every test file ?
Thanks ?

[Timer]

If you use Create React App, you can put the configure() call into src/setupTests.js.

[pedro-stanaka]

I can confirm that putting:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

In the src/setupTests.js file solves the issue.

[SamMatthewsIsACommonName]

I did that, which removed enzyme error, but then got an error like so:

````
Test suite failed to run

Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:18:13)

````

My setupTests file:

````
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

global.requestAnimationFrame = function(callback) {
setTimeout(callback, 0);
};
````
My test:

````
import React from "react";
import { shallow } from "enzyme";
import App from "./index";

const app = shallow();

describe("App", () => {
it("renders correctly", () => {
expect(app).toMatchSnapshot();
});
});
````
Am I missing something really obvious here? do I need to add further dev dependencies or should those be handled by react scripts? Thanks

[gaearon]

This path (react-test-renderer/lib/) doesn't exist in 16. This indicates you are using an old version of react-test-renderer. Please update all packages together to 16.

[SamMatthewsIsACommonName]

That was it, thanks a lot

[goozo]

Does this also work with an ejected CRA ? I'm having trouble getting it to work. I've created src/setupTests.js but looks like it's not picked up automatically so I'm probably missing where to connect the testsSetup export from paths.js ?

[Timer]

This does not work in an ejected app. You must add it to your setup files in your Jest configuration by hand.

[goozo]

ok, think I fixed it, not sure if it's the correct way but it works for ejected CRA by adding to package.json jest property :

"jest": {
    ...
    "setupFiles": [
      "<rootDir>/src/setupTests.js"
    ],
    ...
}

[Timer]

That's correct.

[spacebaboon]

my package.json's jest section already had an entry for setupFiles:

"setupFiles": [
      "<rootDir>/config/polyfills.js"
    ]

and adding my setupTests entry into this array didn't work - it looks like the file wasn't run. I had to add the following as a separate entry at the same level inside the jest section:

"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",

and then all was unicorns and rainbows.

[havenchyk]

@spacebaboon just added "/src/setupTests.js" into setupFiles array and it works fine

[iiiyx]

I've put configure() to src/setupTests.js, but now I receive such error:

    Cannot find module 'react-test-renderer/shallow' from 'ReactFifteenAdapter.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/enzyme-adapter-react-15/build/ReactFifteenAdapter.js:31:16)

    "enzyme": "^3.2.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "react": "^15.6.1",

[Timer]

Have you installed react-test-renderer? It's missing in your package snippet you provided.

I'm going to lock this issue since there are so many participants; if you're having an issue still, please file a new issue.