Bable 没有为 Jest/React 编译 JSX答案

【问题标题】：Bable Not Compiling JSX for Jest/ReactBable 没有为 Jest/React 编译 JSX
【发布时间】：2017-09-23 02:09:54
【问题描述】：

我正在尝试使用 JEST 为 React 设置单元测试。

我当前的设置在 Package.json 中：

 "jest": {
"transform": {
  "^.+\\.jsx?$": "babel-jest"
},
"moduleFileExtensions": [
  "js",
  "json",
  "jsx"
]

}

然后在 .babelrc 我有：

{
    "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react"
  ],
  "env": {
    "test": {
      "presets": ["es2015", "react"]
    }
  }
  }

然后我运行 npm test，然后它开始运行 jest。但是，它会出错/失败：测试套件运行失败，出现错误

                 componentDidMount=()=>{
           |                      ^
        25 |         window.addEventListener('scroll', this.handleScroll)
        26 |     }

这告诉我，当测试进入正确的组件时，它最终会停止在某些 es2015 语法上。

我的设置有问题吗？在 JEST 尝试运行测试之前，似乎 babelrc 实际上并没有进行编译？它是否正确？我的 .babelrc 位于根级别。

【问题讨论】：

看起来您的代码中围绕“componentDidMount”定义存在一些语法错误。如果你的componentDidMount 被定义为一个对象的属性，你应该使用: 而不是=。否则请在此处显示您的代码。
@PhilipTzou 这只是我的 React 组件中的 componentDidMount react lifecyle 方法。运行应用，此方法运行良好，没有错误。
componentDidMount=()=>{...} 代码似乎不正确。你能把它周围的上下文代码贴出来让我们深入了解一下吗？
=()=> 语法只是函数的 es6 箭头语法，这应该不是问题。即使我确实删除了它，并将其设置为 componentDidMount()，它仍然会引发另一个错误：测试套件无法运行 SyntaxError: Unexpected token ILLEGAL
在这样的类中分配属性不是 ES6，而是 babeljs.io/docs/plugins/transform-class-properties，如果需要，您必须显式启用它。

标签： reactjs babeljs jestjs

【解决方案1】：

您缺少transform-class-properties babel plugin。静态类属性不是 ES2015 的一部分，需要单独的插件。

【讨论】：