unexpected token import when using Mocha with Babel

Question

I know this is, in a way, a duplicate question, but none of the tips I've found so far helped, which is why I decided to ask again.

I created a simple test in Mocha, and when I try to run it I keep getting the unexpected token import error. I've tried many different solutions found here and elsewhere, but none of them seem to be relevant to my case. Since I'm a junior level programmer, I did not understand all the answers I've found and thus I'm unable to list them all here. The tip that was given most often, though, was to use --compilers js:babel-core/register. This, however, did not work in my case. Below is my package.json:

`{
  "name": "beer-guru",
  "version": "1.0.0",
  "description": "A simple app displaying info about various beers",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot --open",
    "prettier": "prettier --single-quote --write ./app/**/*.js",
    "lint": "eslint **/*.js",
    "test": "mocha **/*.test.js"
  },
  "keywords": [
    "React.js"
  ],
  "author": "Maciek Maslowski",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "styled-components": "^2.1.1",
    "styled-tools": "^0.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "eslint": "^4.4.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.2.1",
    "expect": "21.0.2",
    "html-webpack-plugin": "^2.26.0",
    "mocha": "3.5.3",
    "prettier": "^1.5.3",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "supertest": "3.0.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}`

my .babelrc:

"presets": [
    "es2015", "react", "env"
  ],
  "plugins": ["transform-class-properties"]

and my webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],

  devServer: {
      historyApiFallback: true
  },

  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader", "eslint-loader"]}
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

Does anyone here have any idea if it's possible to run Mocha tests with this config at all? And if so, does anyone know how?

Many thanks for all tips!

Mocha now has native support for ESM. [See here](https://stackoverflow.com/a/60522428/1945651) for details. — JLRishe, Mar 04 '20 at 09:06

score 2 · Answer 1 · edited Apr 22 '19 at 02:42

2

I had the same issue, then I just started requiring babel/core explicitly:

mocha --require @babel/register

edited Apr 22 '19 at 02:42

arve0

3,424
26
33

answered Sep 16 '17 at 18:46

justadudewhohacks

671
4
12

Thanks! Unfortunately, when I run mocha with this command, I get the error described above: `import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import`, and I don't know how to take it from there :-) – maciek Sep 17 '17 at 07:20
Solved - please see my own answer posted below. There is nothing wrong with your answer, but since I though other users might overlook what I also failed to notice, I posted a longer explanation below. Also, the command you suggested I try works, but, when I fixed the issue described in my answer, it also works without `--require babel-core/register`. Thanks again! – maciek Sep 18 '17 at 07:17

score 1 · Accepted Answer · answered Sep 16 '17 at 19:13

1

You're confusing tests with the bundle. webpack bundles your code through your configured loaders, which are in charge of transforming it if you request it. When you run your tests, you're not going through webpack, you're running them on mocha, which is a separate entity. You need to tell mocha explicitly that you need to transform the code you're testing (and the tests themselves, probably) into a language that it understands.

In order to do this, using the dependencies that you already have installed, you would do:

mocha --compilers js:babel-core/register

More information on this blog post, amongst others.

answered Sep 16 '17 at 19:13

vcanales

1,818
16
20

Thanks! This is what I get when I run Mocha with this command, though: `import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import`. Do you have any clue how to fix this one :-) ? – maciek Sep 17 '17 at 07:23
OK, problem solved - if interested, please see my own answer. Your command works, though - I simply overlooked something obvious, but since this might happen to other users as well, I decided to post my own answer, too. – maciek Sep 18 '17 at 07:19
@maciek, I suggest you accept your own answer then, since mine doesn't really solve this particular problem! Btw. it's amazing how easy it is to overlook something like a wrong path, good catch. – vcanales Sep 19 '17 at 18:23

score 1 · Answer 3 · answered Sep 18 '17 at 07:11

I don't think this will help everyone facing this issue, but since I posted the question, I'm also sharing the solution that helped me. I first tried running Mocha with the following command, as suggested in the answers above: mocha --require babel-core/register --compilers js:babel-core/register. This, however, caused a different problem, as I kept getting the following error: import transformCss, { getStylesForProperty } from '.'; SyntaxError: Unexpected token import. It turned out, though, that the error was caused by a file in the node_modules folder. I thus made the path in the command more specific to prevent Mocha from looking in node_modules (in my case it was app/**/*.test.js instead of **/*.test.js), and now it works fine now.

Unfortunately this is not my problem. I **am** getting the 'Unexpected token import' error for **my** tests written in ES6. It is as if all those `--require` and `--compilers` params completely failed to convince mocha to use babel to load the tests. — Szczepan Hołyszewski, Oct 23 '17 at 00:15

score 0 · Answer 4 · answered Jan 13 '20 at 22:29

0

Mocha now has experimental support for ESM in mocha@7.0.0-esm1: https://github.com/mochajs/mocha/pull/4038#issuecomment-573664595

answered Jan 13 '20 at 22:29

thisismydesign

21,553
9
123
126

unexpected token import when using Mocha with Babel

4 Answers4

Linked