Using ESM with Mocha

[niksy]

Environment (please complete the following information):

• WebdriverIO version: 4.14.1
• Mode: Standalone mode
• Node.js version: 8.11.2
• NPM version: 6.5.0
• Platform name and version: macOS Mojave

Describe the bug

I’m trying to use ES Modules with Mocha and esm following recommended way - by using Mocha require to load ESM loader, and I’m loading it with mochaOpts but I’m getting error described in log below. Is this normal behavior when using ESM loader? Is this something related to Mocha or WebDriverIO? When using just Mocha to run tests (e.g. mocha --require esm ... everything works fine).

Config of WebdriverIO

{
	specs: [
		'./test/integration/**/*.js'
	],
	mochaOpts: {
		require: ['esm']
	},
	// ...
}

Log

ERROR: Unexpected token import
chrome
.../test/integration/index.js:5
import assert from 'assert';
^^^^^^

Syntax    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Module._compile (.../node_modules/pirates/lib/index.js:83:24)
    at Module._extensions..js (module.js:663:10)
    at Object.newLoader [as .js] (.../node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

[niksy]

I’ve managed to make it work by requiring esm on Node part:

npx -n=require -n=esm wdio

It seems like wdio binary would also need to have some require/loading mechanism like Mocha, AVA and other CLI tools.

[dictav]

I have the same problem.
Now, I’m using reify and it works fine.

{
	specs: [
		'./test/integration/**/*.js'
	],
	mochaOpts: {
		require: 'reify'
	}
}

However, it is not maintained so I want to replace reify with esm.

[motss]

@dictav Cool. Never know it works. mocha should work just fine with esm now according to mochajs/mocha#3975.

{
  ...
  specs: ['./test/**/*.js'],
  mochaOpts: {
    require: ['esm'],
  },
  ...
}

[christian-bromann]

Looks like this works now as expected, closing.

[motss]

@christian-bromann I've got the time to do a testing using esm. Unfortunately it does not work but reify works just fine.

Anyone got any luck to get esm working with webdriverio and mocha?

[motss]

Just to update this issue with some other workaround that might work for folks out there. Here's my attempt to instead use @babel/register:

/** package.json */
{
  "devDependencies": {
    "@babel/preset-env": "^7.9.6",
    "@babel/register": "^7.9.0"
  }
}

/** babel.config.json */
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": 12
      }
    }]
  ]
}

// wdio.config.js
module.exports = {
  ...
  mochaOpts: {
    ...
    require: ['@babel/register'],
  },
};

This might increase the install size of your package/ project but this could be another more reliable alternative as compared to using esm as I found out that esm tends not to work reliably for Node.js that support native ES Modules (Please don't quote me on that. I could be wrong),

The upside of using babel with @babel/preset-env is that you do not have to worry much on your code anymore. Babel will take care of this even when you are running your tests with latest ES features.

So, no more using esm or reify. 😌

Hope this helps.

[diachedelic]

None of these solutions worked for me on Node v14.4.0, webdriverio v6.4.5. I am able to run ESM unit tests with mocha, just not ESM specs with wdio.

Edit: this is how mocha does it: https://github.com/giltayar/mocha/blob/master/lib/esm-utils.js

2020-09-09T10:36:44.892Z INFO @wdio/local-runner: Run worker command: run
2020-09-09T10:36:45.046Z DEBUG @wdio/local-runner:utils: init remote session
2020-09-09T10:36:45.049Z INFO webdriverio: Initiate new session using the ./protocol-stub protocol
2020-09-09T10:36:45.197Z WARN @wdio/mocha-framework: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
`browser` object has only `capabilities` and some flags like `isMobile`.
Helper files that use other `browser` commands have to be moved to `before` hook.
Spec file(s): /proj/pkg/accounts/test/specs/delete-account.js
 Error:  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /proj/pkg/accounts/test/specs/delete-account.js
require() of ES modules is not supported.
require() of /proj/pkg/accounts/test/specs/delete-account.js from /proj/node_modules/.pnpm/mocha@8.1.3/node_modules/mocha/lib/mocha.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename delete-account.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /proj/pkg/accounts/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1216:13)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at /proj/node_modules/.pnpm/mocha@8.1.3/node_modules/mocha/lib/mocha.js:390:36
    at Array.forEach (<anonymous>)
    at Mocha.loadFiles (/proj/node_modules/.pnpm/mocha@8.1.3/node_modules/mocha/lib/mocha.js:387:14)
    at MochaAdapter._loadFiles (/proj/node_modules/.pnpm/@wdio/mocha-framework@6.4.0_webdriverio@6.4.5/node_modules/@wdio/mocha-framework/build/index.js:70:18)
    at MochaAdapter.init (/proj/node_modules/.pnpm/@wdio/mocha-framework@6.4.0_webdriverio@6.4.5/node_modules/@wdio/mocha-framework/build/index.js:63:10)