użyj babel-jest dla żartu, ale nadal dostaję błąd składni

Question

Jestem nowicjuszem i chcę przetestować moją aplikację react.js. Podążam za książką, React.js Essentials for jest częścią.

Oto mój kod testy, Button-test.js

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

Oto moja 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" 
    ] 
    } 
} 

Problem jest, gdy uruchomię testu npm, zgłasza następującą składnię błąd. Myślę, że babel-jest zainstalowany i nie mam pojęcia, dlaczego błąd składniowy nadal istnieje. Czy jest coś jeszcze, co muszę zrobić, oprócz instalacji babel-żartu?

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

używasz babelify v7? jeśli tak, być może podążyłeś za wspomnianą poprawką here, która dodaje ustawienie predefiniowane w twoim pliku gulp. To samo musi się zdarzyć z testem, ale ponieważ ten prowadzony jest osobno można dodać do pliku .babelrc w katalogu głównym projektu:

{ 
    "presets": ["react"] 
} 

Test npm powinny następnie działać poprawnie.