设置 Jest 和 Enzyme 来测试 React 15 找不到模块 react/lib/ReactTestUtils

Question

我有一个 react 项目，正在尝试设置一些测试

由于以下设置指南/问题：

• 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/

我已经安装了以下依赖项：

• react-addons-test-utils 15.3.2
• 反应 15.4.0-rc.4
• react-dom 15.4.0-rc-4
• 开玩笑 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

我的 package.json 包含以下 Jest 配置：

 "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
  }

我的组件 (GenericButton) 放在 <rootDir>/components/buttons/GenericButton.js 中，我的测试放在 <rootDir>/test/componnets/buttons/GenericButtonTest.js 中，内容如下：

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

我的 babelrc 文件如下：

{
  "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)"
  ]
}

但是，当我运行测试时，我收到以下错误：

> admin-console@4.1.0 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 react@0.13-14. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

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

我该怎么做才能让这个简单的测试通过？

---

编辑：react-addons-test-utils 需要的文件 react/lib/ReactTestUtils 不在 node_modules/react/lib 文件夹中。

通过将 react-addons-test-utils 升级到 15.4.0-rc.3 解决了这个问题，但后来我得到了：

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

目前，您不能在测试中同时使用 ReactTestUtils 和 enzyme。幸运的是，您也可以使用酶模拟点击。唯一的问题是simulate不会传播到子组件，所以你需要先找到子组件并在其上调用simulate。

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

酶需要这些依赖：

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

安装为devDependencies。这对我有用。