jest不能在react中转换静态

Question

下面的代码使用jest失败，我得到了unexpected token error

export default class Search extends Component {
  state = { // problem is here
    q: ''
  }

  onChange = e => {
    this.setState({
      q: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input onChange={this.onChange} placeholder="search" />
      </div>
    )
  }
}

我使用的是babel-7，有没有什么需要我开玩笑的插件？

我使用的是jest版本^23.6.0

Answer 1

如果要使用类属性，则需要添加babel-plugin-transform-class-properties。因此，安装它，然后确保将其作为插件添加到.babelrc文件中，如下所示：

  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

Answer 2

要么使用构造函数，要么使用this.state定义状态

constructor(props) {
    super(props)    
    this.state = {
        q: ''
    }
}

或者使用https://www.npmjs.com/package/babel-plugin-transform-class-properties。

类字段仍然是阶段3提议的https://github.com/tc39/proposal-class-fields