unexpected token import when using Mocha with Babe

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!

Answer 1

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.

Answer 2

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.

Answer 3

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

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