Enzyme: Cannot find module 'react/lib/ReactTestUtils'

[caseybaggz]

Enzyme is now throwing errors when I upgraded react-scripts to 0.8.3 & 0.8.4. Everything was passing, but now enzyme is blowing up.

Package.json

"devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "enzyme": "2.6.0",
    "react-addons-test-utils": "15.0.0-rc.2",
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  }

Example.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { mount } from 'enzyme';
import FooterLink from './';


describe('FooterLink component', () => {

  it('should render without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<FooterLink url={ 'test.com' } />, div);
  });

  it('should have a name prop', () => {
    const wrapper = mount(<FooterLink name="test" />);
    expect(wrapper.props().name).not.toBeNull();
    expect(wrapper.props().name).toBeDefined();
    expect(wrapper.props().name).toEqual('test');
    expect(wrapper.props().name).not.toEqual('');
  });

  it('should have a url prop', () => {
    const wrapper = mount(<FooterLink url="/test" />);
    expect(wrapper.props().url).not.toBeNull();
    expect(wrapper.props().url).toBeDefined();
    expect(wrapper.props().url).toEqual('/test');
    expect(wrapper.props().url).not.toEqual('#');
  });

  it('should have a default url prop of "#"', () => {
    const wrapper = mount(<FooterLink />);
    expect(wrapper.props().url).not.toBeNull();
    expect(wrapper.props().url).toBeDefined();
    expect(wrapper.props().url).toEqual('#');
    expect(wrapper.props().url).not.toEqual('');
  });

});

output:

 FAIL  src/components/FooterLink/FooterLink.test.js
  ● Test suite failed to run

    Cannot find module 'react/lib/ReactTestUtils' from 'index.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:151:17)
      at Object.<anonymous> (node_modules/react-addons-test-utils/index.js:1:107)
      at node_modules/enzyme/build/react-compat.js:128:19

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.178s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
  console.error node_modules/enzyme/build/react-compat.js:131
    react-addons-test-utils is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

[ljharb]

What is react-scripts and what does it do?

[ljharb]

Your react-addons-test-utils package is too old; it needs to be upgraded in lockstep with react and react-dom

[blainekasten]

react-scripts is part of create-react-app.

[blainekasten]

It basically alias's to jest with some specific configuration.

[stephnr]

I am seeing this issue myself too. Looks like the issue is with the ReactDOM package missing a require connection to the testing tools kit.

[blainekasten]

cc @gaearon, did anything change/break in 0.8.4 that you think could have caused this?

[gaearon]

This is not related to react-scripts.
In your package.json:

    "react-addons-test-utils": "15.0.0-rc.2", // <--- this is an RC
  },
  "dependencies": {
    "react": "^15.3.2", // <--- this points to latest stable
    "react-dom": "^15.3.2", // <--- this points to latest stable

Pre-releases don't get updated with caret in semver so you keep using [email protected].
However since you ran npm install you also got 15.4.1 of react and react-dom.

The internal wiring of packages changed in 15.4. You need to keep versions of all React packages in sync. React doesn't support running TestUtils 15.0 with React 15.4, or ReactDOM 15.4 with React 15.3. They all should have the same version.

If you bump to [email protected] the issue will be fixed.

[ljharb]

@caseybaggz @Stephn-R see my comment above https://github.com/airbnb/enzyme/issues/724#issuecomment-266482126

[caseybaggz]

@gaearon thanks for the insight. I was unaware of that!

[tkssharma]

why we always need to struggle with these different dependancies!! why are we making javascript a mess

console.error node_modules/enzyme/build/react-compat.js:119 react-addons-test-utils is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

Now i am struggling to setup basic DOM testing for react app with 15.x version.

[ljharb]

@tkssharma react-compat.js is in enzyme 2; it doesn't exist in enzyme 3. Try upgrading.