反應摩卡 - “缺少類屬性轉換”

Question

我開始在我的mocha測試中使用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

問題是你不告訴摩卡使用babel。 你可以npm install --save-dev babel-register並使用mocha --require babel-register

所以你的測試命令看起來像：

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

Answer 2

babel-core已經帶有你需要用es6運行mocha的寄存器。 沒有必要安裝它。

您應該嘗試使用--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：缺少類屬性轉換。

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

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 ）關鍵字，我還需要將“stage-0”添加到babelrc中的預設中。