对jest使用babel-jest，但仍然会出现语法错误

Question

我是jest新手，想测试一下我的react.js应用程序。我正在阅读一本书，“jest部分的React.js要点”。

以下是我的测试代码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);
  });
});

这是我的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 test时，它报告以下语法错误。我认为安装了babel-jest，但我不知道为什么语法错误仍然存在。除了安装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

你在使用babelify v7吗？如果是这样的话，你可能已经遵循了修复提到的here，它在你的gulpfile中添加了react预设。测试也需要发生同样的事情，但是因为它是单独运行的，所以您可以将以下代码添加到项目根目录下的.babelrc文件中：

{
  "presets": ["react"]
}

npm测试应该可以正常工作。

Answer 2

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

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