jestのためにbabel-jestを使用しても構文エラーが発生する

Question

私は新しくjestに反応し、react.jsアプリケーションをテストしたいと思っています。 私はReact.js Essentials for jestの本を読んでいます。ここで

は私のテストコードはここ

jest.dontMock('../Button.react'); 

describe('Button component', function() { 
    it('calls handler function on click', function() { 
    var React = require('react'); 
    var TestUtils = require('react-addons-test-utils'); 
    var Button = require('../Button.react'); 
    var handleClick = jest.genMockFunction(); 

    var button = TestUtils.renderIntoDocument(
     <Button handleClick={handleClick}/> 
    ); 

    var buttonInstance = 
     TestUtils.findRenderedDOMComponentWithTag(button, 'button'); 

    TestUtils.Simulate.click(buttonInstance); 
    expect(handleClick).toBeCalled(); 
    var numberOfCallsMadeIntoMockFunction = 
     handleClick.mock.calls.length; 
    expect(numberOfCallsMadeIntoMockFunction).toBe(1); 
    }); 
}); 

、ボタン-test.jsである私のpackage.jsonである

{ 
    "name": "snapterest", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "jest" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-jest": "^6.0.1", 
    "babelify": "^6.2.0", 
    "browserify": "^12.0.1", 
    "gulp": "^3.9.0", 
    "jest-cli": "^0.8.0", 
    "vinyl-source-stream": "^1.1.0" 
    }, 
    "dependencies": { 
    "react": "^0.14.0-beta3", 
    "react-dom": "^0.14.0-beta3", 
    "snapkite-stream-client": "^1.0.3" 
    }, 
    "jest": { 
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", 
    "testFileExtensions": ["es6", "js"], 
    "unmockedModulePathPatterns": [ 
     "<rootDir>/node_modules/react" 
    ] 
    } 
} 

問題は、私は、NPMのテストを実行すると、それは次の構文を報告していますエラー。私はbabel-jestがインストールされていると思います。なぜ構文エラーがまだ残っているのかわかりません。バベル・ジェストをインストールする以外に何か必要なことはありますか？

source/components/__tests__/Header-test.js 
● Runtime Error 
SyntaxError:   
/snapterest/source/components/__tests__/Header-test.js: Unexpected token (11:6) 
    9 |  
    10 |  var button = TestUtils.renderIntoDocument(
> 11 |  <Button handleClick={handleClick}/> 
    |  ^
    12 | ); 

Answer 1

npm install react-addons-test-utils babel-preset-es2015 babel-preset-react --save-dev 

http://facebook.github.io/jest/docs/tutorial-react.html#content

Answer 2

あなたはbabelify V7を使用していますか？そうであれば、gulpfileに反応プリセットを追加するhereという修正プログラムに従っている可能性があります。同じことが、テストで発生する必要があるが、これは個別に実行されているので、あなたのプロジェクトのルートに.babelrcファイルにこれを追加することができます。

{ 
    "presets": ["react"] 
} 

NPMテストは、正常に動作するはずです。