问题
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:
> 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?
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)
回答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();
});
})
回答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.
来源:https://stackoverflow.com/questions/40466134/setting-up-jest-and-enzyme-to-test-react-15-cannot-find-module-react-lib-reactte