設置玩笑和酶，以測試陣營15找不到模塊反應/ lib目錄/ ReactTestUtils

我有一個反應的項目，我試圖建立一些測試設置玩笑和酶，以測試陣營15找不到模塊反應/ lib目錄/ ReactTestUtils

由於以下安裝指南/問題：

我已經安裝了下列相關性：

反應-插件 - 測試 - 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)" 
    ] 
}

但是當我跑我的測試，我得到以下錯誤：

> [email protected] 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 [email protected] Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation 

npm ERR! Test failed. See above for more details.

我能做些什麼，使這個簡單的測試通過了嗎？

編輯：文件反應/ LIB /起反應-插件 - 測試 - utils的正在請求是不是在node_modules ReactTestUtils /反應/ lib文件夾。

這是固定通過升級反應 - 插件 - 測試 - utils的到15.4.0，rc.3但後來我：

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)

來源

2016-11-07 mangusbrother

您不能在您的測試在使用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(); 
    }); 
})

來源

2016-11-07 13:29:43

ReferenceError：點擊未定義 --------在對象。（test \ components \ buttons \ GenericButtonTest.js：18：42） -------- at process._tickCallback（internal \ process \ next_tick.js：103：7） – mangusbrother

我的答案中有一個錯字。 –

錯誤解決。現在：方法「道具」只能在單個節點上運行。 0代替。在ShallowWrapper.props（node_modules \ enzyme \ build \ ShallowWrapper.js：791：21）上ShallowWrapper.single（node_modules \ enzyme \ build \ ShallowWrapper.js：1401：17） ----- ShallowWrapper.prop（node_modules \ enzyme \ build \ ShallowWrapper.js：997：21） -----在ShallowWrapper.simulate（node_modules \ enzyme \ build \ ShallowWrapper.js：762：28） -----在對象。（test \ components \ buttons \ GenericButtonTest.js：17：33） ----- at process._tickCallback（internal \ process \ next_tick.js：103：7） – mangusbrother

酶需要這些依賴關係：

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

安裝爲devDependencies。這對我有效。

來源

2017-01-19 10:24:35

設置玩笑和酶，以測試陣營15找不到模塊反應/ lib目錄/ ReactTestUtils

回答

相關問題