Mocha: Babel 6 not working with mocha

[carlosbaraza]

I am facing issues using Babel 6 with mocha CLI and Node module to be required. I use Gulp but the result is the same than if I run with the CLI.

Run mocha --compilers js:babel-core/register:

.../test/title-generation.babel.js:1
(function (exports, require, module, __filename, __dirname) { import { assert } from "assert";
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at loader (.../node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (.../node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at .../node_modules/mocha/lib/mocha.js:216:27
    at Array.forEach (native)
    at Mocha.loadFiles (.../node_modules/mocha/lib/mocha.js:213:14)
    at Mocha.run (.../node_modules/mocha/lib/mocha.js:453:10)
    at Object.<anonymous> (.../node_modules/mocha/bin/_mocha:393:18)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:136:18)
    at node.js:972:3

package.json:

{
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "gulp": "^3.9.0",
    "gulp-mocha": "^2.2.0",
    "mocha": "^2.3.4"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "babel-require": "^1.0.1"
  }
}

[carlosbaraza]

Ok, I just found the problem while writing this issue and I though it would be nice to share my stupidity... For some strange reason I called the .babelrc file babel.rc... It is strictly mandatory to have this configuration file for Babel to transpile correctly.

.babelrc:

{
  "presets": ["es2015"]
}

[jiji262]

@carlosbaraza thanks for your solution.
I tried many ways, but only this one works well.

[ronanquillevere]

In case someone else end up here, up to date solution (dec 2016) : http://stackoverflow.com/a/37076911/1301197

[steinbachr]

Unfortunately, these solutions weren't working for me. Having a .babelrc of

{ "presets" : ["es2016", "stage-3", "react"] }

and running my test with mocha --compilers js:babel-core/register, I was still getting the error described above:

(function (exports, require, module, __filename, __dirname) { import { getBlockAbsoluteDims, cutIntoBlocks } from '../src/js/common/lib/layout';
                                                              ^^^^^^
SyntaxError: Unexpected token import

for me, I found that what was breaking it was the "es2016" preset, so I changed my .babelrc to the following:

{
  "presets" : ["es2016", "stage-3", "react"],
  "env": {
    "test": {
      "presets": ["es2015", "react"]
    }
  }
}

this, in conjunction with running the tests via BABEL_ENV=test mocha --compilers js:babel-core/register solved the issue for me.

[ahmadalibaloch]

None of the above working for me.

[mattleonowicz]

For those who use presets like es2016 and/or es2017 read this: (just the ending)
https://github.com/avajs/ava/issues/1059

That explains everything. In short: preset for es2016 contains only features introduced in es2016 release, preset for es2017 in es2017. But modules were introduced in es2015. So instead of using just es2016, you have to use es2015 + es2016. If you want es2017 you might even want all three.

[agopaul]

@steinbachr's solution worked for me, although just slightly changed. For some reason, the react-app preset alone works perfectly with webpack, but not in the test environment with mocha.

{
  "presets" : ["react-app"],
  "env": {
    "test": {
      "presets": ["es2015", "react-app"]
    }
  }
}

[ScottFreeCode]

For some reason, the react-app preset alone works perfectly with webpack, but not in the test environment with mocha.

Most likely the react-app preset doesn't transpile the module syntax but Webpack, since it's a bundler and therefore responsible for pulling in the modules that would have been loaded through the module system, may be supporting import/export itself.

[TerryZ]

@carlosbaraza Thanks a lot, you solved my problem.

[rmmariano]

I'm having a similar problem with Mocha 6 and Babel 7.
When I try to use ES6 with Mocha and Babel to create a new npm package, I'm getting the following error:

> @rmmariano/[email protected] test /home/inpe/Documents/datainfo/npm_packages/ol-sb
> mocha --require @babel/register

/home/inpe/Documents/datainfo/npm_packages/ol-sb/node_modules/ol/control.js:5
export {default as Attribution} from './control/Attribution.js';
^^^^^^

SyntaxError: Unexpected token export

The code is not importing a dependency on my node_modules correctly.

I've described better the question on StackOverflow:

https://stackoverflow.com/questions/55165721/mocha-6-babel-7-es6-syntaxerror-unexpected-token-export

Thanks in advance

[plroebuck]

@rmmariano, don't comment on closed issues; open a new one instead.
But your problem has absolutely nothing to do with "mocha"...