React Jest 示例不起作用答案

【问题标题】：React Jest example doesn't workReact Jest 示例不起作用
【发布时间】：2016-02-13 05:35:55
【问题描述】：

尝试运行 Jest 测试 React 代码的示例（来自 https://github.com/facebook/jest/tree/master/examples/react ），我收到以下错误：

  > @ test /home/aizquier/jest/examples/react
  > jest

  Using Jest CLI v0.7.1
   FAIL  __tests__/CheckboxWithLabel-test.js 
  ● Runtime Error
  SyntaxError: /home/aizquier/jest/examples/react/__tests__/CheckboxWithLabel-test.js: Unexpected token (15:6)
  npm ERR! Test failed.  See above for more details.

测试在 CheckboxWithLabel-test.js 文件的第 15 行失败：

jest.dontMock('../CheckboxWithLabel');

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';

const CheckboxWithLabel = require('../CheckboxWithLabel');

describe('CheckboxWithLabel', function() {

  it('changes the text after click', function() {

    // Render a checkbox with label in the document
    var checkbox = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="On" labelOff="Off" />
    );

    var checkboxNode = ReactDOM.findDOMNode(checkbox);

    // Verify that it's Off by default
    expect(checkboxNode.textContent).toEqual('Off');

    // Simulate a click and verify that it is now On
    TestUtils.Simulate.change(TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input'));
    expect(checkboxNode.textContent).toEqual('On');
  });

});

显然处理 .jsx 的预处理器不工作。 package.json如下：

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "react-addons-test-utils": "~0.14.0",
    "babel-jest": "*",
    "jest-cli": "*"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "./node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "./node_modules/react",
      "./node_modules/react-dom",
      "./node_modules/react-addons-test-utils",
      "./node_modules/fbjs"
    ]
  }
}

我的节点是 v4.2.2，npm 是 3.3.12。

有什么想法吗？？

【问题讨论】：

标签： javascript node.js testing reactjs jestjs

【解决方案1】：

我遇到了同样的问题。看起来这是由最近发布的 Babel 6 引起的问题。它是 tracked here，希望尽快添加修复程序！

与此同时，您可以在package.json 中返回到早期版本的babel-jest。例如，试试^5.3.0。

【讨论】：

【解决方案2】：

如果您使用的是 Babel 6，则没有默认转换，因此您需要添加一些预设。不确定您是否可以在“package.json”中执行此操作，但我添加了带有“react”和“es2015”预设的“.babelrc”文件并对其进行了排序。见http://babeljs.io/docs/plugins/preset-react/

【讨论】：