Question

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

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

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

react-addons-test-utils 15.3.2
反应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-lib / ReactTestUtils，react-lib-test-utils需要的文件不在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。这对我有用。

设置Jest和Enzyme以测试React 15无法找到模块react / lib / ReactTestUtils

2 个答案: