Babel unexpected token import when running mocha tests

Question

The solutions offered in other related questions, such as including the proper presets (es2015) in .babelrc, are already implemented in my project.

I have two projec

Answer 1

I found the easiest way to do with with babel 6.X.X was to use nyc and then add in a helper file into the pckage.json

So here is what I used

package.json

{
  ....
  "scripts": {
    "test": "nyc mocha --reporter tap 'test/**/*.spec.js'"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.24.0",
    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
    "mocha": "^3.2.0",
    "nyc": "^10.1.2",
    "webpack": "^2.3.3",
    "webpack-config": "^7.0.0",
    "webpack-dashboard": "^0.3.0",
    "webpack-dev-server": "^2.4.2"
  },
  "nyc": {
    "all": true,
    "include": [
      "src/**/*.js"
    ],
    "cache": true,
    "require": [
      "./test/helper/registerBabel.js"
    ]
  }
}

babelrc

{
  "presets": [
    "es2015", //remove the {modules: false} it doesn't work with this
    "stage-2"
  ]
}

registerBabel.js

/* eslint-disable import/no-commonjs, import/unambiguous */
require('babel-register')();

Now you will be able to use es6 in your tests or wherever you need to. Mine are all failing ;)

Then npm run test which will fire off nyc mocha --reporter tap 'test/**/*.spec.js'

Answer 2

for a more future proof setting

npm install babel-preset-latest --save-dev

and in .babelrc

{
  "presets": [ "latest" ]
}

as opposed to...

npm install babel-preset-es2015 --save-dev

and

{
 "presets": [ "es2015" ]
}

Answer 3

It seems the only solution is to explicitly include:

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
}); 

in a test helper file, and pass that along to mocha in my test command:

mocha --require ./test/testHelper.js...

---

The final solution:

Add registerBabel.js: a separate file whose job is to require babel-core/register...

require('babel-core/register')({
  ignore: /node_modules/(?!ProjectB)/
});

Add an entry.js if your application also relies on babel-node. This acts as a wrapper for your es6 containing application.

require('./registerBabel');
require('./server'); // this file has some es6 imports

You would then run your application with node entry

For mocha testing, testHelper.js should require registerBabel.js as well to initialize babel support at run time.

require('./registerBabel');

And run your mocha tests with mocha --require ./testHelper.js '+(test)/**/*Spec.js'

This will recursively test any file ending in "Spec.js" within "./test". Substitute the pattern with one matching the specs in your project.

Answer 4

For anybody using Babel 7 and Mocha 4, some of the package names have changed a bit and the accepted answer is a bit out-dated. What I had to do was:

npm install @babel/register --saveDev

and adding --require @babel/register to the test line in package.json

"test": "./node_modules/mocha/bin/mocha --require @babel/polyfill --require @babel/register './test/**/*.spec.js'"

The @babel/polyfill fixes some things like async/await functionality if you happen to be using those.

Hope that helps somebody :)

Answer 5

I had the same issue and fixed it by reading from the babel documentation for integrating Babel with Mocha :

{
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

Answer 6

I resolved this issue this morning with the following instructions

Install NPM Modules

npm install --save-dev @babel/polyfill
npm install --save-dev @babel/register

package.json:

"scripts": {
    "test": "mocha --require @babel/register --require @babel/polyfill src/DesktopApplication/Tests",
  }

.babelrc

{
  "presets": ["@babel/env"]
}