SyntaxError: Неожиданный токен static

Question

В настоящее время я пытаюсь оценить различные рамки тестирования, которые работают с 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; 

Когда я запускаю тесты (тест НПМ или шутя), Он выдает следующее сообщение об ошибке:

➜ 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/" 
    ] 
    } 
} 

A Какие идеи мне не хватает?

Спасибо.

Answer 1

Any ideas on what I'm missing here?

Свойство класс не является ни частью, ни es2015react предустановки.

Вы должны загрузить плагины, который обрабатывает свойства класса:

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

И в файле .babelrc (рядом с существующими плагинами или пресетами):

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

Answer 2

Эта ошибка происходит, так как классы Standard ES6 могут иметь только методы, а не свойства.
Для меня это было разрешено установкой babel-preset-stage-0, которая добавляет поддержку свойств класса.

npm install babel-preset-stage-0 --save-dev 

Затем настройте Webpack (или .babelrc), чтобы использовать этот пресет:

//... 
presets: ['react', 'es2015', 'stage-0'] 
//... 

Reference