Jest und Enzyme einrichten testen 15 Reagieren Sie können Modul nicht gefunden reagieren/lib/ReactTestUtils

Question

Ich habe ein Projekt reagieren und

Aufgrund der folgenden Setup-Führer/Fragen einige Tests zur Einrichtung versuche:

• 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/

ich die folgenden Abhängigkeiten installiert haben:

• reagieren-addons-Test-utils 15.3.2
• reagieren 15.4.0-rc.4
• reagieren-dom 15.4.0-rc -4
• jest Live 16.0.2
• babel-Scherz 16.0.0
• babel-Preset-es2015 6.18.0
• babel-pr ESET-es2015-lose 7.0.0
• babel-Preset reagieren 6.16.0

Mein package.json enthält folgende Jest Konfiguration:

"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 
    } 

Ich habe meine Komponente (GenericButton) platziert in <rootDir>/components/buttons/GenericButton.js und mein Test in <rootDir>/test/componnets/buttons/GenericButtonTest.js mit Inhalt wie folgt:

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(); 
    }); 
}) 

Meine babelrc Datei ist wie folgt:

{ 
    "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)" 
    ] 
} 

, wenn ich meinen Test jedoch laufen, bekomme ich folgende Fehlermeldung:

> 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. 

Was kann ich tun, diese einfachen Test machen passieren?

---

Edit: Die Datei reagieren/lib/ReactTestUtils, die reagieren-addons-Test-utils benötigt wird, ist nicht in den node_modules/reagieren/lib Ordner.

Dies wurde behoben durch ein Upgrade reagieren-addons-Test-utils zu 15.4.0-rc.3 aber dann bekam ich:

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

Sie nicht ReactTestUtils und enzyme zusammen in Ihrem Test bei der Verwendung können Moment. Glücklicherweise können Sie das Klicken mit Enzym auch simulieren. Das einzige Problem ist, dass simulate nicht an die Komponenten childs weitergegeben wird, also müssen Sie das Kind zuerst finden und simulate darauf aufrufen.

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

Enzyme benötigt diese Abhängigkeiten:

npm i --save-dev enzyme 
npm i --save-dev react-addons-test-utils 
npm i --save-dev react-dom 

als devDependencies installiert werden. Das hat für mich funktioniert.