mocha esm jsx

mocha-esm-jsx.md

Mocha tests containing JSX with ESM

Having a Mocha test suite containing JSX which you converted to ESM (aka import/export), you might run into

Unexpected token '<'

or

require is not defined in ES module scope, you can use import instead

depending on where you started and how far you got.

The idea is to transpile only JSX to JS as everything else is now basically covered natively in node. Pre-ESM Mocha's --require @babel/register would probably do this for you. But once you add "type": "module" to package.json it doesn't work anymore.

Solution

• install @node-loader/babel
• run Mocha with --loader=@node-loader/babel (or --node-option loader=@node-loader/babel from an npm workspace)

Thoughts

• This feels like a shortcomming in Mocha's --require but is actually an issue in Babel's @babel/register. See the note at the bottom of the docs.
• It would be great if Babel would have an official "Node loader" (node --loader) to replace the @node-loader/babel dependency.
• Or an independent JSX-transpiler?

Thank you so much for this information, it took me a lot of work to find this page and figure out why Mocha+JSX+ES modules wouldn't work properly for me.

Great it could help you!