React Mocha - `Missing class properties transform`

Question

I'm starting to use es6 with my mocha tests, but its failing with: Missing class properties transform.

Test

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

Component

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",

Error

> 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

The problem is that you don't tell mocha to use babel. You can npm install --save-dev babel-register and use mocha --require babel-register

So your test command would look like:

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

Answer 2

babel-core already comes with the register you need to run mocha with es6. There's no need to install it.

You should try using the --compilers option. I use the following command to test my es6 applications:

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

Although, the error you are getting:

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

Is probably due syntax error. Try changing

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

to

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

For what I know, es6 class syntax doesnt allow the creation of variables in the class scope, only declaration of functions.

One more thing, in order to es6 work with the import (instead of require ) keyword, I also needed to add "stage-0", to my presets in babelrc.