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): react-scripts@1.0.14

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 />);
});

5. 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 call `Enzyme.configure({ adapter: new Adapter() })`
          before using any of Enzyme's top level APIs, where `Adapter` 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(<App />);

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.