Running mocha with babel es2015 not working properly

Question

I'm trying really hard to get Babel 6 to work for me. I use 5 quite successfully for my day job (for React development), but 6 doesn't seem to be integrating with Mocha as expected.

I have these devDependencies, scripts, and babel configuration:

{
  "devDependencies": {
    "babel-cli": "^6.1.2",
    "babel-core": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "mocha": "^2.3.3"
  },
  "scripts": {
    "test": "mocha --compilers js:babel-core/register ./tests --recursive"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

Here's my test code:

import ObjectBeingTested from '../src/object-being-tested';

describe('ObjectBeingTested', () => {
  it('does stuff', () => {
    const obj = new ObjectBeingTested({ foo: 0, bar: 1 });
    // ...
  });
});

...and the source code has:

export default class ObjectBeingTested {
  constructor({ foo, bar}) {
    this.foo = foo;
    this.bar = bar;
  }
}

However, when running, I get foo is not defined in the first line of the constructor. Interestingly, if I transpile the code directly and call it directly through the node CLI, it works fine. Here's what babel-cli produced for the file:

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ObjectBeingTested = (function () {
  function ObjectBeingTested(_ref) {
    _classCallCheck(this, ObjectBeingTested);

    var foo = _ref.foo;
    var bar = _ref.bar;

    this.foo = foo;
    this.bar = bar;
  }

  _createClass(ObjectBeingTested, [/*...other defs */]);

  return ObjectBeingTested;
})();

exports.default = ObjectBeingTested;

How do I properly run mocha to transpile tests & anything they import?

Things I've tried:

• Moving the babel configuration into a .babelrc file instead; there's no difference.
• Using -r babel-core/register instead of --compilers also does not work.

Update

This is interesting. I decided to do a console.log(ObjectBeingTested.toString()) after the import to see what mocha was getting; here's what it outputs:

function ObjectBeingTested(_ref) {
    _classCallCheck(this, ObjectBeingTested);

    this.foo = foo;
    this.bar = bar;
  }

Notice the two dereferencing lines are completely missing.

Update 2:

The issue has nothing to do with mocha; I can reproduce that imported modules are not transpiled the same way as those transpiled in bulk.

Answer 1

I found a workaround. First off, I switched to Node 5 (from 0.12) so that I would need less transformation plugins for working code. I first tried the es2015-node5 preset, but that still didn't work. So instead, I pulled in these specific plugins in my .babelrc:

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-es2015-parameters",
    "transform-es2015-destructuring"
  ]
}

With these, my constructor finally transpiled correctly.