Jasmine SyntaxError:意外的令牌静态

Jasmine SyntaxError:意外的令牌静态,jasmine,ecmascript-6,jestjs,ecmascript-2016,Jasmine,Ecmascript 6,Jestjs,Ecmascript 2016,我目前正在尝试评估使用React的不同测试框架,结果发现Jest在我的列表中。但是,我尝试使用此处概述的静态属性: 因此,我接受了Jest主页上提供的教程,并添加了一个静态propTypes属性,我的代码如下所示: import React from 'react'; class CheckboxWithLabel extends React.Component { static defaultProps = {} constructor(props) { super(pr

我目前正在尝试评估使用React的不同测试框架,结果发现Jest在我的列表中。但是,我尝试使用此处概述的静态属性:

因此,我接受了Jest主页上提供的教程,并添加了一个静态propTypes属性,我的代码如下所示:

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;
{
  "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/"
    ]
  }
}
我的package.json文件如下所示:

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;
{
  "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/"
    ]
  }
}
{
“依赖项”:{
“反应”:“~0.14.0”,
“react dom”:“~0.14.0”
},
“依赖性”:{
“巴别塔笑话”:“*”,
“巴别塔-preset-es2015”:“*”,
“巴别塔预设反应”:“*”,
“jest cli”:“*”,
“react插件测试实用工具”:“~0.14.0”
},
“脚本”:{
“测试”:“开玩笑”
},
“笑话”:{
“scriptPreprocessor”:“/节点\模块/babel jest”,
“unmockedModulePathPatterns”:[
“/node\u模块/react”,
“/node\u modules/react dom”,
“/node\u modules/react addons test utils”,
“/node_modules/fbjs”
],
“modulePathIgnorePatterns”:[
“/node_modules/”
]
}
}
你知道我遗漏了什么吗

谢谢

你知道我遗漏了什么吗

类属性既不是
es2015
的一部分,也不是
react
预设的一部分

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

npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties
.babelrc
文件中(现有插件或预设旁边):


发生此错误的原因是标准ES2015(ES6)类只能有方法,不能有属性。
对我来说,通过安装babel-preset-stage-0解决了这个问题,它增加了对类属性的支持

npm install babel-preset-stage-0 --save-dev
然后配置Webpack(或
.babelrc
)以使用此预设:

//...
presets: ['react', 'es2015', 'stage-0']
//...
更新: 截至2018年年中,巴贝尔
env
预设支持ES2015、ES2016和ES2017。 因此,您可以跳过stage-0预设,而是使用环境预设

npm install babel-preset-env --save-dev
然后将您的。
babelrc
更新为

//...
presets: ['env', 'xyz']
//...
要支持最新的ES2018功能,如spread operator/async功能,您可以添加
stage-3
预设


谢谢!在这之后还有一个错误:“SyntaxError:Unexpected token….”,有什么想法吗?这些插件是针对Babel 6的吗?我在5.x中通过设置stage 0实现了这一点@HappyCry它指向一条特定的线吗?@MattMolnar:是的,那是给巴别塔6的。