开玩笑不预处理我的 JSX答案

【问题标题】：Jest not preprocessing my JSX开玩笑不预处理我的 JSX
【发布时间】：2016-03-01 17:41:09
【问题描述】：

我正在关注Jest tutorial 来测试一个反应组件，并且我的 jsx 遇到了预处理问题。我认为错误是由于预处理引起的，错误消息不是很有帮助。谷歌搜索显示与旧版本的 react/jest 类似的错误，这些错误已通过包含 /** @jsx React.DOM */ docblock 得到修复，据我所知已修复。

当我运行测试时：

Using Jest CLI v0.8.0, jasmine1
 FAIL  spec/MyComponent_spec.js
Runtime Error
SyntaxError: /Users/asdf/react/stuff-react/spec/MyComponent_spec.js: Unexpected token (13:6)
npm ERR! Test failed.  See above for more details.

有问题的行是应该渲染我的组件的行：

jest.dontMock('../src/MyComponent');

let React = require('react');
let ReactDOM = require('react-dom');
let TestUtils = require('react-addons-test-utils');

const MyComponent = require('../src/MyComponent');

describe('MyComponent', function(){
  it('render', function(){

    var myComponent = TestUtils.renderIntoDocument(
      // This is the line referenced in the test error
      <MyComponent />
    )
    var myComponentNode = ReactDOM.findDOMNode(myComponent);

    expect(myComponentNode.textContent).toEqual('hi');
  });
});

我认为我的 package.json 负责告诉 jest 预处理该文件？

 "scripts": {
    "test": "jest"
  },
  "jest": {
    "testDirectoryName": "spec",
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  },

我的组件：

import React from 'react';

class MyComponent extends React.Component({
  render () {
    return (
      <div>
        hi
      </div>
    )
  }
});

export default MyComponent;

【问题讨论】：

标签： reactjs jestjs

【解决方案1】：

我认为您可能只需将 testFileExtensions 和 testFileExtensions 添加到 package.json 的 jest 部分。

查看 babel-jest 的 README.md：

https://github.com/babel/babel-jest

【讨论】：

谢谢，我确实有 testFileExtensions 和 moduleFileExtensionswith es6，但它仍然抛出同样的错误
我在这里发现了一个类似的问题：stackoverflow.com/questions/28870296/… - 这有帮助吗？

【解决方案2】：

使用项目根目录中的 .bablerc 文件为我修复了它。

我在开发时没有使用 .babelrc 文件，因为我在 webpack 配置文件中定义了我的预设。但事实证明，当您使用 jest 运行单元测试时，jest 不知道这个预设，因为它不知道 webpack。因此，简单地添加一个带有预设的 .babelrc 文件也应该可以为您解决问题。

.babelrc 的内容：

{ "presets": ["es2015", "react"] }

【讨论】：

非常有帮助的答案，这让我发疯了！谢谢！
我们可以在 jest configs 上定义一个自定义的 babel 配置吗？因为在我的情况下，由于多重构建原因，我不能使用 .babelrc

【解决方案3】：

将我的 .babelrc 配置文件更改为 babel.config.js 或 babel.config.json 对我有用，因为 Jest 忽略了 .babelrc。

【讨论】：

我刚刚添加了一个.babelrc，发现你的说法不正确，因为它改变了我一直在运行的一个笑话命令的行为。
取决于您运行的 Jest 版本。
您能否在答案中发布哪些版本的 Jest 忽略了 babelrc？
我不确定哪些版本会忽略它。但可以肯定的是 v 24.x 会忽略它。

【解决方案4】：

我遇到了类似的问题，解决方案是将其添加到 jest 配置文件：

"transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.jsx$": "babel-jest"  // This line was missing
}

在我们的项目中需要它的原因是因为我们覆盖了 jest 配置文件中的默认 "transform" 值。

【讨论】：