设置Jest和Enzyme以测试React 15无法找到模块react / lib / ReactTestUtils [英] Setting up Jest and Enzyme to test React 15 cannot find module react/lib/ReactTestUtils
问题描述
我有一个反应项目，我正在尝试设置一些测试
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/
- 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
- 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配置：
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
}
我的组件（GenericButton）放在< rootDir> /components/buttons/GenericButton.js 和我在< rootDir> /test/componnets/buttons/GenericButtonTest.js 中的测试，内容如下：
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();
});
})
我的babelrc文件如下：
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:
> 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.
我可以做些什么来做这个简单的测试通过？
What can I do to make this simple test pass?
编辑：react-lib / ReactTestUtils，react-lib-test-utils需要的文件不在node_modules / react / lib文件夹中。
The file react/lib/ReactTestUtils which react-addons-test-utils is requiring is not in the node_modules/react/lib folder.
这是通过将react-addons-test-utils升级到15.4.0-rc.3来解决的，但后来我得到了：
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)
推荐答案
目前您的测试中不能同时使用 ReactTestUtils 和酶。幸运的是，您也可以用酶模拟点击。唯一的问题是模拟不会传播到组件子项，因此您需要先找到子项并调用模拟上它。
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();
});
})
这篇关于设置Jest和Enzyme以测试React 15无法找到模块react / lib / ReactTestUtils的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
