モジュール反応/ libに/ ReactTestUtils

Question

I反応するプロジェクトを持っており、いくつかのテストにより、以下のセットアップガイド/問題へ

セットアップしようとしています：

• 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/
テスト-utilsの反応 - アドオン15.3.2
• 反応15.4.0-rc.4
• 反応-DOM 15.4.0-RC
  • ：私は次の依存関係をインストールしている

  -4

• 冗談16.0.2
• バベル、冗談16.0.0
• バベル・プリセット・es2015 6.18.0
• バベル-PR ESET-es2015-緩い7.0.0
• バベル・プリセット・反応6.16.0

マイpackage.jsonは以下の冗談の設定が含まれます。

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

私はこの簡単なテストに合格するために何ができますか？編集

---

：ファイル/-アドオンテスト-utilsの反応LIB/ReactTestUtilsの反応が必要とされる/を/ libフォルダを反応node_modulesではありません。

これは15.4.0-rc.3に反応-アドオンテスト-utilsのアップグレードすることで固定されているが、その後私が得た：

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としてインストールします。これは私のために働いた。