笑话：意外的令牌@Decorator

Posted 2023-02-23

【中文标题】笑话：意外的令牌@Decorator

【英文标题】：Jest: Unexpected token @ Decorator

【发布时间】：2018-04-12 14:46:17

【问题描述】：

我收到一个错误：测试套件无法运行：意外的令牌 (5:0)

3 | import Locale from '../stores/view/language'
4 |
5 | @observer
  | ^
6 | export default class DateFormat extends Component 
7 |   constructor(props) 
8 |     super(props)

我正在使用 Webpack + Babel + Jest + Enzyme + react + Mobx

这是我的一些 package.json

  "scripts": 
    "test": "jest",
  ,
  "devDependencies": 
    "babel-eslint": "8.0.1",
    "babel-jest": "21.2.0",
    "enzyme": "3.1.0",
    "enzyme-adapter-react-16": "1.0.2",
    "jest": "21.2.1",
  ,
  "babel": 
    "presets": [
      "env",
      "react"
    ],
    "env": 
      "test": 
        "presets": [
          "env",
          "react"
        ]
      
    
  ,
  "dependencies": 
    "axios": "0.16.2",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-preset-env": "1.6.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "extract-text-webpack-plugin": "3.0.2",
    "mobx": "3.3.1",
    "mobx-react": "4.3.3",
    "node-sass": "4.5.3",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-interpolate-component": "0.11.0",
    "react-router-dom": "4.2.2",
    "react-test-renderer": "16.0.0",
    "react-translate-component": "0.14.0",
    "webpack": "3.8.1"
  ,
  "jest": 
    "testPathIgnorePatterns": [
      "./__tests__/test-setup.js"
    ],
    "setupTestFrameworkScriptFile": "./__tests__/test-setup.js",
    "transform": 
      "^.+\\.jsx?$": "babel-jest"
    
  

这是正在测试的组件：

import React,  Component  from 'react'
import  observer  from 'mobx-react'
import Locale from '../stores/view/language'

@observer
export default class DateFormat extends Component 
  constructor(props) 
    super(props)
    this.state =
    
      fi:  lang: 'fi-FI', options:  year: 'numeric', month: 'numeric', day: 'numeric'  ,
      en:  lang: 'en-US', options:  year: 'numeric', month: 'long', day: 'numeric'  ,
    
  

  render() 
    return (
      <span>
        new Date(this.props.date).toLocaleDateString(
          this.state[Locale.currentLang].lang,
          this.state[Locale.currentLang].options,
        )
      </span>
    );
  

不知道如何修复 observable。 我错过了什么吗？还是我应该以其他方式对此进行测试？

我没有 .babelrc 文件。

【参考方案1】：

我认为您需要添加一个 .babelrc 文件。听起来您缺少 babel 的 es2016 插件，它将 ES7 代码（如装饰器）转换为 ES5。

https://babeljs.io/docs/plugins/preset-es2016/

【讨论】：

好的，谢谢！添加了一个带有插件的 .babelrc 文件："plugins": ["transform-decorators-legacy", "transform-class-properties"], 现在它可以工作了。