Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils

Question

I have a react project and am trying to setup some tests

Due to the following setup guides / issues:

• https://github.com/facebook/jest/issues/1353 ,
• https://github.com/facebook/react/issues/7386 ,
• http://facebook.github.io/jest/docs/tutorial-react.html#content ,
• http://airbnb.io/enzyme/

I have installed the following dependencies:

• react-addons-test-utils 15.3.2
• react 15.4.0-rc.4
• react-dom 15.4.0-rc-4
• jest 16.0.2
• babel-jest 16.0.0
• babel-preset-es2015 6.18.0
• babel-preset-es2015-loose 7.0.0
• babel-preset-react 6.16.0

My package.json contains the following Jest configuration:

 "jest": {
    "bail": false,
    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.js",
      "!<rootDir>/node_modules/**"
    ],
    "coverageDirectory": "coverage",
    "coveragePathIgnorePatterns": [
      "<rootDir>/node_modules"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      }
    },
    "globals": {
      "SOURCEMAP": true
    },
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/sass",
      "<rootDir>/public",
      "<rootDir>/node_modules"
    ],
    "resetModules": true,
    "testPathDirs": [
      "<rootDir>/test"
    ],
    "testRegex": "(/test/.*|\\.(test|spec))\\.(js|jsx)$",
    "verbose": true
  }

I have my component (GenericButton) placed in <rootDir>/components/buttons/GenericButton.js and my test in <rootDir>/test/componnets/buttons/GenericButtonTest.js with contents as following:

import React from 'react';
import GenericButton from 'components/buttons/GenericButton';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import ReactTestUtils from 'react-addons-test-utils'

describe('Generic Button', () => {
    test('Button action called when clicked', () => {
        var clicked = false;
        const component = shallow(
            <GenericButton action={() => {
                clicked = true;
            }}/>
        );

        console.log("Clicking the button!");
        ReactTestUtils.Simulate.click(component);
        expect(clicked).toBeTruthy();
    });
})

My babelrc file is as follows:

{
  "presets": [
    "es2015-loose",
    "react",
    "stage-0"
  ],
  "plugins": [
    "babel-root-slash-import",
    "transform-decorators-legacy",
    "react-hot-loader/babel",
    "transform-runtime"
  ],
  "compact": true,
  "ignore": [
    "/node_modules/(?!react-number-input)"
  ]
}

when I run my test however, I get the following error:

> [email protected] test C:\path\to\project
> jest

 FAIL  test\components\buttons\GenericButtonTest.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:144:17)
      at Object.<anonymous> (node_modules\react-addons-test-utils\index.js:1:107)
      at node_modules\enzyme\build\react-compat.js:128:19

----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
All files |  Unknown |  Unknown |  Unknown |  Unknown |                |
----------|----------|----------|----------|----------|----------------|
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.843s
Ran all test suites.
  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

npm ERR! Test failed.  See above for more details.

What can I do to make this simple test pass?

---

Edit: The file react/lib/ReactTestUtils which react-addons-test-utils is requiring is not in the node_modules/react/lib folder.

This was fixed by upgrading react-addons-test-utils to 15.4.0-rc.3 but then I got:

TypeError: Cannot read property '__reactInternalInstance$t476n6b4jes0zxw0n18vbzkt9' of undefined

  at getClosestInstanceFromNode (node_modules\react-dom\lib\ReactDOMComponentTree.js:106:11)
  at Object.getInstanceFromNode (node_modules\react-dom\lib\ReactDOMComponentTree.js:140:14)
  at Object.click (node_modules\react-dom\lib\ReactTestUtils.js:326:74)
  at Object.<anonymous> (test\components\buttons\GenericButtonTest.js:17:67)

Answer 1

You can't use ReactTestUtils and enzyme together in your test at the moment. Fortunately you can simulate the click with enzyme as well. The only problem is that simulate does not propagate to the components childs, so you need to find the child first and call simulate on it.

import React from 'react';
import GenericButton from 'components/buttons/GenericButton';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

describe('Generic Button', () => {
    test('Button action called when clicked', () => {
        var clicked = false;
        const component = shallow(
            <GenericButton action={() => {
                clicked = true;
            }}/>
        );
        component.find('selectrorOfChildWithClickHandler').first().simulate('click')
        expect(clicked).toBeTruthy();
    });
})

Answer 2

Enzyme needs these dependencies:

npm i --save-dev enzyme
npm i --save-dev react-addons-test-utils
npm i --save-dev react-dom

to be installed as devDependencies. This worked for me.