[英]SyntaxError: Unexpected token static
我目前正在尝试评估与React一起使用的不同测试框架,结果证明Jest在我的列表中。 但是,我正在尝试使用此处概述的静态属性: https : //github.com/jeffmo/es-class-fields-and-static-properties 。
所以,我接受了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;
当我运行测试(npm test或jest)时,它会抛出以下错误:
➜ 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)
我的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/react-addons-test-utils",
"<rootDir>/node_modules/fbjs"
],
"modulePathIgnorePatterns": [
"<rootDir>/node_modules/"
]
}
}
关于我在这里缺少什么的想法?
谢谢。
关于我在这里缺少什么的想法?
类属性既不是es2015
一部分,也不是react
预设。
您必须加载处理类属性的插件:
npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties
在.babelrc
文件中(在现有插件或预设旁边):
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
由于标准ES2015(ES6)类只能有方法而不是属性,因此会发生此错误。
对我来说,它是通过安装babel-preset-stage-0
解决的,它增加了对类属性的支持。
npm install babel-preset-stage-0 --save-dev
然后配置Webpack(或.babelrc
)以使用此预设:
//...
presets: ['react', 'es2015', 'stage-0']
//...
更新:截至2018年中期 ,Babel env
预设支持ES2015,ES2016和ES2017 。 因此,您可以跳过stage-0预设,而是使用env预设
npm install babel-preset-env --save-dev
然后更新你的。 babelrc
到
//...
presets: ['env', 'xyz']
//...
要支持最新的ES2018功能,例如传播操作符/异步功能,您可以添加stage-3
预设。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.