usa babel-jest per jest ma ottengo ancora l'errore di sintassi

Question

Sono nuovo per scherzo e voglio testare la mia app react.js. Sto seguendo un libro, React.js Essentials per la parte jest.

Ecco il mio codice di prova, 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); 
    }); 
}); 

Ecco il mio 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" 
    ] 
    } 
} 

Il problema è, quando ho eseguito test di NPM, riporta la seguente sintassi errore. Penso che babel-jest sia installato, e non ho idea del motivo per cui l'errore di sintassi è ancora lì. C'è qualcos'altro che devo fare tranne l'installazione di 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

stai usando babelify V7? In tal caso, potresti aver seguito la correzione menzionata here che aggiunge il preset di risposta nel tuo gulpfile. La stessa cosa deve accadere con il test, ma dal momento che questo è gestito separatamente è possibile aggiungere questo a un file .babelrc nella root del vostro progetto:

{ 
    "presets": ["react"] 
} 

prova npm dovrebbe quindi funzionare correttamente.