Mocha: Add possibility to set babel 7 config file path

[PavelKastornyy]

I am trying to use mocha with Babel7 and I came across the following problem. Babel 7 can be configured via babel.config.js however, there seems to be no way to pass babel config file path to mocha. I asked a question at stackoverflow but got no answer.

If it is possible to do, then, please, say how. If not, then, please, add such possibility.

[plroebuck]

From Babel's config file docs:

New in Babel 7.x, Babel has as concept of a "root" directory, which defaults to the current working directory. For project-wide configuration, Babel will automatically search for a "babel.config.js" in this root directory. Alternatively, users can use an explicit "configFile" value to override the default config file search behavior.

So why would you need to pass anything?
How do you know it's not being referenced?
Did you try turning on Babel's debug?

[PavelKastornyy]

@plroebuck

This is my project structure:

script4j
|
|-modules
|   |-script4j.base  
|   |-script4jfx.base   
|   |-script4jfx.graphics
|-babel.config.js

So, I have three ES6 modules. Module script4jfx.graphics depends on other two modules. The problem with Babel 7 is that it is not so easy to make it compile files outside current folder. To solve this problem I try using babel.config.js.

I think that it is not referenced because after removing all .babelrc from modules and adding babel.config.js to project root mocha doesn't use babel - I get import/export unexpected token error.

What about babel debugging I didn't find way how to enable it while using mocha. If you tell, I would be thankful to you.

[plroebuck]

Forget Mocha for the moment. What happens when you enable debugging and run Babel by hand? Does that show your "babel.config.js" settings (which you don't show) being used?

[PavelKastornyy]

@plroebuck
This is my babel.config.js:

module.exports = function (api) {
    api.cache(true);
    const presets = ["@babel/preset-env"];
    console.log("Point XXX"); //NOTE THIS LINE
    return {
        babelrcRoots: [
            '.',
            './modules/*',
        ],
          ignore: [
            './node_modules/*',
        ],
        presets//plugins
    };
}

Here we go:

$ pwd
/home/Pavel/script4j/modules/script4jfx.graphics

$ npx babel ./tmp/script4jfx.graphics.spec.js
import { ArrayList } from 'script4j.base';
import 'script4jfx.base';
import { describe, it, beforeEach } from 'mocha';
describe('NodeTest', () => {
  beforeEach(function () {});
  it('test', () => {
    let l = new ArrayList();
    console.log(l);
    console.log("test");
  });
});

$ npx babel ./tmp/script4jfx.graphics.spec.js --config-file ./../../babel.config.js
Point XXX
"use strict";
var _script4j = require("script4j.base");
require("script4jfx.base");
var _mocha = require("mocha");
(0, _mocha.describe)('NodeTest', function () {
  (0, _mocha.beforeEach)(function () {});
  (0, _mocha.it)('test', function () {
    var l = new _script4j.ArrayList();
    console.log(l);
    console.log("test");
  });
})

As you see without setting config-file it doesn't work.

[plroebuck]

From Babel's docs, it says:

The primary downside of this project-wide config is that, because it relies on the working directory, it can be more painful to use in monorepos if the working directory is not the monorepo root.

(not claiming _any_ Babel expertise)
So _I_ would try the following first:

$ MONOREPO="${HOME}/script4j"
$ MODULES_DIR="${MONOREPO}/modules"
$ MOD_BASE="${MODULES_DIR}/script4j.base"
$ MOD_FXBASE="${MODULES_DIR}/script4jfx.base"
$ MOD_FXGRAPHICS="${MODULES_DIR}/script4jfx.graphics"
$ cat << EOF >> "${MOD_BASE}/.babelrc"
{ "extends": "../../babel.config.js" }

EOF
$ ln -s "${MOD_BASE}/.babelrc" "${MOD_FXBASE}/.babelrc"
$ ln -s "${MOD_BASE}/.babelrc" "${MOD_FXGRAPHICS}/.babelrc"

After that, rerun your "Point XXX" test from above. The RC files should allow Babel to pickup config when running npx from various locations.

[PavelKastornyy]

@plroebuck
I've already tried what you suggest. The problem is that .babelrc doesn't extend well babel.config.js. But to make it clear for you I repeat, so :
I added .babelrc to /home/Pavel/script4j/modules/script4jfx.graphics with the following content:
{ "extends": "../../babel.config.js" }
And now:

$ npx babel ./tmp/script4jfx.graphics.spec.js

Point XXX
Error: .babelrcRoots is not allowed in .babelrc or "extends"ed files, only in root programmatic options, or babel.config.js/config file options
    at Object.keys.forEach.key (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/validation/options.js:100:15)
    at Array.forEach (<anonymous>)
    at validateNested (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/validation/options.js:83:21)
    at validate (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/validation/options.js:74:10)
    at file (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/config-chain.js:179:34)
    at cachedFunction (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/caching.js:33:19)
    at mergeExtendsChain (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/config-chain.js:299:35)
    at /home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/config-chain.js:279:12
    at buildRootChain (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/config-chain.js:120:22)
    at loadPrivatePartialConfig (/home/Pavel/script4j/modules/script4jfx.graphics/node_modules/@babel/core/lib/config/partial.js:85:55)

[plroebuck]

As far as getting Mocha to work with your base config file, dunno if above is sufficient or not.
If not...
Assuming somewhere, you're using something like this in "package.json".

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

Instead, I'd create a standalone registration file "registerbabel7.js".

$ cd ${MODULES_DIR}
$ cat << EOF >> "registerbabel7.js"
require("@babel/register")({
  rootMode: "upward"
});
EOF
$

and use it instead (so Babel will search towards $MONOREPO for the "babel.config.js" file)...

"scripts": {
  "test": "mocha --require registerbabel7.js"
}

[PavelKastornyy]

@plroebuck Thank you very much for your solution - require("@babel/register")({rootMode: "upward"}); + mocha --require registerbabel7.js - it seems to work.

[plroebuck]

How about this?

$ cd ${MOD_FXGRAPHICS}
$ npx babel --root-mode upward ./tmp/script4jfx.graphics.spec.js

[SteveAtSentosa]

This is a completely valid question, especially with the advent of mono-repos. I have been struggling with this for a while, and plroebuck's answer worked perfectly 🙏