sử dụng babel-jest cho jest nhưng vẫn gặp lỗi cú pháp

Question

Tôi mới bắt đầu và muốn thử nghiệm ứng dụng react.js của mình. Tôi đang theo dõi một cuốn sách, React.js Essentials for jest part.

Đây là mã thử nghiệm của tôi, nút-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); 
    }); 
}); 

Đây là package.json tôi

{ 
    "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" 
    ] 
    } 
} 

Vấn đề là, khi tôi chạy thử nghiệm NPM, nó báo cáo các cú pháp sau lỗi. Tôi nghĩ rằng babel-jest được cài đặt, và tôi không có ý tưởng tại sao lỗi cú pháp vẫn còn đó. Tôi có cần làm gì khác ngoài việc cài đặt babel-jest không?

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

bạn đang sử dụng babelify v7? nếu có, bạn có thể đã làm theo các sửa chữa được đề cập here mà thêm các cài đặt trước phản ứng trong gulpfile của bạn. Điều tương tự cũng cần phải xảy ra với các thử nghiệm, nhưng vì đây là chạy riêng biệt, bạn có thể thêm video này vào tập tin .babelrc trong thư mục gốc của dự án của bạn:

{ 
    "presets": ["react"] 
} 

NPM kiểm tra sau đó sẽ làm việc một cách chính xác.