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'm adding another ES6+mocha+babel config answer here, current as of June '19 (refer to dates on answer/commente). mocha has deprecated the --compiler flag, and the version that I'm using has that unavailable even with --no-deprecation flag, c.f. this

Note that I won't include all of the relevant bits from the linked pages, because none of them got me to a clean test build based on the latest versions of mocha and babel; this answer should include the steps that got me to a successful test build.

Following the instructions here, and in this answer, and here, I tried installing what appeared to be the minimum latest babel using npm install:

$ npm install --save-dev mocha
$ npm install --save-dev @babel/preset-env

And I adjusted the mocha invocation in package.json, like so:

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

This led to errors:

× ERROR: --compilers is DEPRECATED and no longer supported.

As above, --no-deprecation didn't help, please reference the page linked above. So following the instructions from here I adjusted package.json:

"scripts": {
    "test": "mocha --require js:@babel/register"
}

And started seeing errors about locating babel modules, such as:

× ERROR: Cannot find module '@babel/register'

At this point I started installing babel packages until I could progress. I believe that the full install is something like:

$ npm install --save-dev @babel/preset-env @babel/register @babel/core

The last change required was to update the mocha invocation in package.json, removing the js: prefix, like so:

"scripts": {
    "test": "mocha --require @babel/register"
}

I can't answer why this was necessary: if someone can answer this please leave a comment and I'll update my answer with better information.

The last thing that I did was create a .babelrc in the project directory, with the contents:

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

I can't recall what prompted this, but I believe that it was because mocha continued to complain about not recognizing the import keyword in my test.js. As above, if someone can answer this please leave a comment and I'll update my answer with better information.

Answer 2

--compilers is deprecated.

My simple solution:

npm install --save-dev babel-core

And in the package.json add your test script like this:

  "scripts": {
    "test": "mocha --require babel-core/register ./test/**/*.js -r ./test-setup.js"
  },

Answer 3

Here's what worked for me. I got a warning when using the --compilers flag.

DeprecationWarning: "--compilers" will be removed in a future version of Mocha; see https://git.io/vdcSr for more info

I therefore replaced it with the --require flag

"test":  "mocha --require babel-core/register --recursive"

Here's my .babelrc:

{
  "presets": ["env"]
}

My package.json dev dependencies

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "mocha": "^5.2.0",
}

Answer 4

I resolved this issue this morning with the following instructions from the official Using Babel instructions for Mocha 4:

Install NPM Modules

npm install --save-dev babel-polyfill
npm install --save-dev babel-preset-env
npm install --save-dev babel-register

or a single command:

npm i -d babel-polyfill babel-preset-env babel-register

package.json:

"scripts": {
    "test": "mocha --require babel-polyfill --require babel-register"
  }

.babelrc

{
  "presets": ["env"]
}

Answer 5

I installed mocha and met the exact same error when I use import in my code. By doing the following actions, the issue was fixed.

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev

And then add a .babelrc file:

{
    "presets": [
        "es2015"
    ]
}

And then run mocha in this way:

mocha --compilers js:babel-core/register