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)
Best Answer
You can't use
ReactTestUtils
andenzyme
together in your test at the moment. Fortunately you can simulate the click with enzyme as well. The only problem is thatsimulate
does not propagate to the components childs, so you need to find the child first and callsimulate
on it.