reactjs - 使用 babel-jest 来开 Jest 但仍然出现语法错误

Question

我是 Jest 新手，想测试我的react.js 应用程序。我正在关注一本书，《React.js Essentials for jest》部分。

这是我的测试代码，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 test 然后应该可以正常工作。