New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel 6 not working with mocha #2054

Closed
carlosbaraza opened this Issue Jan 15, 2016 · 9 comments

Comments

Projects
None yet
9 participants
@carlosbaraza

carlosbaraza commented Jan 15, 2016

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

This comment has been minimized.

carlosbaraza commented Jan 15, 2016

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

This comment has been minimized.

jiji262 commented Apr 21, 2016

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

@ronanquillevere

This comment has been minimized.

ronanquillevere commented Dec 5, 2016

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

@steinbachr

This comment has been minimized.

steinbachr commented Sep 1, 2017

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

This comment has been minimized.

ahmadalibaloch commented Sep 10, 2017

None of the above working for me.

@mattleonowicz

This comment has been minimized.

mattleonowicz commented Sep 25, 2017

For those who use presets like es2016 and/or es2017 read this: (just the ending)
avajs/ava#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

This comment has been minimized.

agopaul commented Nov 23, 2017

@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

This comment has been minimized.

Member

ScottFreeCode commented Nov 23, 2017

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

This comment has been minimized.

TerryZ commented Dec 9, 2018

@carlosbaraza Thanks a lot, you solved my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment