SyntaxError：意外的令牌静态 [英] SyntaxError: Unexpected token static

问题描述

我正在尝试评估使用React的不同测试框架，结果证明Jest在我的列表中。但是，我试图使用这里概述的静态属性： https：// github.com/jeffmo/es-class-fields-and-static-properties 。

所以，我参加了在Jest主页上给出的教程，并添加了一个静态的propTypes属性，我的代码如下所示：

  import来自'react'的反应; 
 
 class CheckboxWithLabel extends React.Component {
 
 static defaultProps = {} 
 
构造函数（道具）{
 super（props）; 
 this.state = {isChecked：false}; 
 
 //因为React的类模型禁用了自动绑定
 //我们可以在这里预绑定方法
 // http://facebook.github.io/react/blog /2015/01/27/react-v0.13.0-beta-1.html#autobinding 
 this.onChange = this.onChange.bind（this）; 
} 
 
 onChange（）{
 this.setState（{isChecked：！this.state.isChecked}）; 
} 
 
 render（）{
 return（
< label> 
< input 
 type =checkbox
 checked = {this.state.isChecked} 
 onChange = {this.onChange} 
 /> 
 {this.state.isChecked？this.props.labelOn：this.props.labelOff } 
< / label> 
）; 
} 
} 
 
 module.exports = CheckboxWithLabel; 
  

当我运行测试（npm测试或jest）时，会抛出以下错误： FAIL __tests __ / CheckboxWithLabel-test.js
●运行时错误
SyntaxError：Desktop / jest / examples / reactions / CheckboxWithLabel.js：意外的令牌（5:22）

我的package.json文件如下所示：

  {
dependencies： {
react：〜0.14.0，
react-dom：〜0.14.0
}，
devDependencies：{
babel-jest：*，
babel-preset-es2015：*，
babel-preset-react：*，
jest- cli：*，
react-addons-test-utils：〜0.14.0
}，
scripts：{
test jest
}，
jest：{
scriptPreprocessor：< rootDir> / node_modules / babel-jest，
unmockedModulePathPatterns：[
< rootDir> / node_modules / react，
< rootDir> / node_modules / react-dom，
< rootDir> / node_modules / reactions-addons-test-utils，
< rootDir> / node_modules / fbjs 
，
modulePathIgnorePatterns：[
< rootDir> / node_modules /
] 
} 
} 
  

任何关于我在这里失踪的想法？

谢谢。

解决方案

关于我在这里失踪的任何想法？

类属性既不属于 es2015 也不是反应的一部分预设。

您必须加载处理类属性的插件：

  npm安装babel-plugin-transform-class-properties babel-plugin-syntax-class-properties 
  

在您的 .babelrc 文件（现有插件或预设旁边）：

 code>plugins：[
syntax-class-prop erties，
transform-class-properties
] 
  

I'm currently trying to evaluate different testing frameworks that work with React, and it turns out that Jest is on my list. However, I'm trying to use static properties outlined here: https://github.com/jeffmo/es-class-fields-and-static-properties.

So, I took the tutorial that is given on the Jest homepage, and added a static propTypes property, my code looks like this:

import React from 'react';

class CheckboxWithLabel extends React.Component {

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {isChecked: false};

    // since auto-binding is disabled for React's class model
    // we can prebind methods here
    // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({isChecked: !this.state.isChecked});
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.onChange}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    );
  }
}

module.exports = CheckboxWithLabel;

When I run the tests (npm test or jest), It throws the following error:

➜  jest            
Using Jest CLI v0.8.2, jasmine1
 FAIL  __tests__/CheckboxWithLabel-test.js 
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)

My package.json file looks like this:

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "babel-jest": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "~0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "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"
    ],
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  }
}

Any ideas on what I'm missing here?

Thanks.

解决方案

Any ideas on what I'm missing here?

Class properties are neither part of the es2015 nor the react preset.

You have to load the plugins that handles class properties:

npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties

And in your .babelrc file (next to existing plugins or presets):

"plugins": [
   "syntax-class-properties",
   "transform-class-properties"
]

这篇关于SyntaxError：意外的令牌静态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！