How to transpile ES6 imports in Chai?

Question

I am using the least minimal setup for a react application:

• Webpack
• Babel
• React + Flux
• Mocha & Chai for testing

I want to test my app now.

I have a .babelrc with the following content:

{
  "presets": ["es2015"],
  "ignore": false
}

And my test looks like this:

import { expect, assert } from 'chai';
import AppStore from '../src/js/stores/app-store';

describe('app store', () => {
  assert.equal(3,3);
});

When I comment the second import out, it works.

When I import my AppStore, I am getting this error message:

(function (exports, require, module, __filename, __dirname) { import { dispatch, register } from '../dispatchers/app-dispatcher';
                                                              ^^^^^^

SyntaxError: Unexpected token import

So, I am apparently transpiling the test.js file, but the imports won't transpile to ES5.

What can I do, how does a minimal setup look like (without using Grunt or whatever).

EDIT: My node scripts inside the package.json look like this:

  "scripts": {
    "dev": "webpack && webpack-dev-server",
    "test": "mocha --compilers js:babel-core/register --recursive"
  },

Answer 1

I ran into that same issue. Having tried every other solution on stackoverflow and beyond, this simple config on package.json did it for me:

  "babel": {
    "presets": [
      "es2015"
    ]
  }

All my ES6 imports worked after that. By the way, I had this same configuration inside webpack.config.js, but apparently this was the only way to make it work for mocha testing as well.