Mocha + Babel + React Modules

Question

How can I configure Mocha/Babel to also transform a module in my node_modules folder when required?

I am developing an application in ES6 with react.

I include an external react component which I installed through npm install.

When I run the test (mocha --recursive --compilers js:babel/register) the test fails with an Unexpected token '<' error from the external module.

The reason is that the external react module needs to be transformed when being loaded. This is specified in the modules package.json like so:

"browserify": {
  "transform": [
    "reactify"
  ]
}

It runs fine for the browser. The source is compiled with browserify -t babelify. The browserify information from the package.json is used and the module is transformed properly when it is loaded.

How can I configure Mocha/Babel to take this also into account?
Or how can I configure Mocha/Babel to also compile the modules in the node_modules folder?
Or any other way to solve this?

Answer 1

Babel will, by default, not transpile the node_modules directory. If you wish to disable this, you can set the ignore option to false.

On the command line, you can pass --ignore false to either babel or babel-node to allow Babel to transpile the node_modules directory.

For your uses, you can pass Mocha the --compilers js:babel/register option to transpile the files Mocha accesses. In order to allow Babel's register hook to transpile the node_modules directory, you can configure Babel with a .babelrc file. The file should contain the following: { "ignore": false }.

Either of these options should allow you to use this external module (since Babel will transpile it).