陣營摩卡 - `transform`

Question

我開始使用ES6與我的摩卡測試缺少類的屬性，但它與失敗： Missing class properties transform.

測試

"test": "BABEL_ENV=test nyc mocha --watch tap 'test/**/*.spec.js'", 

組件

class SignIn extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      email: 'as', 
      pw: 'as' 
     }; 

     this.logIn = this.logIn.bind(this); 
     this.changed = this.changed.bind(this); 
    } 

    changed = (e) => { 
     let newDeets = {}; 
     newDeets[e.target.name] = e.target.value; 
     this.setState(newDeets); 
    }; 

.babelrc

{ 
    "presets": ["es2015", "react","react-hmre"], 
    "ignore": [ 
    "public/**/*.js" 
    ], 
} 

的package.json

"autoprefixer": "^6.4.0", 
"babel-core": "^6.11.4", 
"babel-eslint": "^4.1.6", 
"babel-jscs": "^2.0.5", 
"babel-loader": "^6.2.4", 
"babel-preset-es2015": "^6.9.0", 
"babel-preset-react": "^6.11.1", 
"babel-preset-react-hmre": "^1.1.1", 
"babel-preset-stage-0": "^6.5.0", 

錯誤

> BABEL_ENV=test nyc mocha --watch tap 'test/**/*.spec.js' 

/var/www/kindred.com/node_modules/babel-core/lib/transformation/file/index.js:590 
     throw err; 
    ^

SyntaxError: /var/www/kindred.com/src/components/Signin/index.js: Missing class properties transform. 
    17 | } 
    18 | 
> 19 | changed = (e) => { 
    | ^
    20 |  let newDeets = {}; 
    21 |  newDeets[e.target.name] = e.target.value; 
    22 |  this.setState(newDeets); 

Answer 1

的問題是，你不告訴摩卡使用巴貝爾。您可以npm install --save-dev babel-register和使用摩卡--require babel-register

所以你的測試命令如下所示：

"test": "BABEL_ENV=test nyc --require babel-register mocha --watch tap 'test/**/*.spec.js'", 

Answer 2

巴貝爾核已經自帶了，你需要用ES6運行摩卡的註冊。沒有必要安裝它。

您應該嘗試使用--compilers選項。我用下面的命令來測試我的ES6應用：

"./node_modules/.bin/mocha --timeout 0 --compilers js:babel-core/register --reporter spec" 

雖然，錯誤給你：

SyntaxError: /var/www/kindred.com/src/components/Signin/index.js: Missing class properties transform.

可能是由於語法錯誤。嘗試改變

changed = (e) => { 
    let newDeets = {}; 
    newDeets[e.target.name] = e.target.value; 
    this.setState(newDeets); 
}; 

到

changed(e) { 
    let newDeets = {}; 
    newDeets[e.target.name] = e.target.value; 
    this.setState(newDeets); 
} 

對於我所知道的，ES6類語法犯規允許在類範圍內創建的變量，只有函數聲明。

一兩件事，爲了ES6與import（而不是require）關鍵字的工作，我還需要添加「0級」，我在babelrc預設。