javascript - 设置 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
• 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

我的 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。幸运的是，您也可以使用 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();
    });
})