意外的令牌 = 在 Mocha 反应测试中答案

【问题标题】：Unexpected token = in Mocha react tests意外的令牌 = 在 Mocha 反应测试中
【发布时间】：2016-06-07 13:33:59
【问题描述】：

我用 Mocha 测试我的 React 组件，当我运行 npm test 时出现异常

SyntaxError: /Users/igunchenko/WorkProjects/Cloud_App/cloud.webapp/cloud.webapp.web/src/main/ui/app/DOM/pages/AdminPanel.js: Unexpected token (18:10)
16 | @connect()
17 | export class AdminPage extends Component {
18 |     state = {
   |           ^

在 .babelrc 中，我描述了我的 react 应用程序的预设和插件：

{
  "presets": [ "es2015", "stage-2", "react"],
  "plugins": ["transform-decorators"]
}

但是，没有任何改变。我在配置中丢失了什么？以及如何解决这个问题？

【问题讨论】：

可能是同一个问题？ stackoverflow.com/questions/37679530/…
是的，非常相似。安装使用stage-0。
@MichaelRasoahaingo 是的，这似乎是同一个问题，但 stage-0 不支持装饰器
装饰器已经从stages中提取出来，你甚至可以添加state-x和装饰器

标签： javascript reactjs mocha.js babeljs

【解决方案1】：

您可以尝试以下方法。它帮助了我。将此添加到“.babelrc”

  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"],

这是你的“package.json” DevDepedencies

"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.3.13",

然后使用“npm i”更新您的项目希望对您有所帮助。

【讨论】：

只有这个有效。下面给出的答案是使用“syntax-decorators”，“transform-decorators”不起作用。

【解决方案2】：

它应该看起来更像;

export default class AdminPage extends React.Component {
  constructor() {
    super();
    this.state = {something: ''};
  }

【讨论】：

很好的解决方案，但我有超过 50 个反应组件，这种方式不适合我
我什至不知道 state = { 会起作用，所以我只是更改了我的一个组件，它确实起作用了。带有 jest/enzyme 和第 2 阶段通过的单元测试。见github.com/calitek/ReactPatternsReact.15.Common/Buttons。
我错了，第二阶段失败了。运行这些测试存在一些奇怪的时间问题。阶段 0 工作。

【解决方案3】：

您只是应用了转换插件，而忽略了装饰器的语法。可以的，

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": ["syntax-decorators", "transform-decorators"]
}

或者，在撰写本文时，“类和属性装饰器”处于第 1 阶段。https://github.com/tc39/proposals

所以你可以使用

{
  "presets": ["es2015", "stage-1", "react"]
}

【讨论】：