[🐛 Bug]: issue with jasmine, ts-node and esm tests

[Badisi]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

7.19.5

Node.js Version

14.17.5

Mode

WDIO Testrunner

Which capabilities are you using?

{
  browserName: 'chrome',
  maxInstances: 5,
  acceptInsecureCerts: true
}

What happened?

I have built a plugin for wdio (@badisi/wdio-harness) that mostly ease the use of angular components when writing e2e tests, thanks to angular component test harnesses.

Everything works fine with angular v12 but breaks with angular v13 as older output formats such as CommonJS (CJS) and UMD have been removed (#43833).

The error that I'm facing is :

[0-0] (node:3918) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /wdio-harness/node_modules/@angular/material/fesm2015/button/testing.mjs
[0-0]     at Module.load (internal/modules/cjs/loader.js:935:11)
[0-0]     at Function.Module._load (internal/modules/cjs/loader.js:778:12)
[0-0]     at Module.require (internal/modules/cjs/loader.js:961:19)
[0-0]     at require (internal/modules/cjs/helpers.js:92:18)
[0-0]     at Object.<anonymous> (/wdio-harness/projects/tests-e2e/test.e2e.ts:1:1)
[0-0]     at Module._compile (internal/modules/cjs/loader.js:1072:14)
[0-0]     at Module.m._compile (/wdio-harness/node_modules/ts-node/src/index.ts:1455:23)
[0-0]     at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
[0-0]     at Object.require.extensions.<computed> [as .ts] (/wdio-harness/node_modules/ts-node/src/index.ts:1458:12)
[0-0]     at Module.load (internal/modules/cjs/loader.js:937:32)

As I am using typescript, this is how things are called in my project (the import being the one causing the issue) :

$ wdio run wdio.config.ts
  -> wdio.config.ts
    -> test.e2e.ts
      -> import { MatButtonHarness } from '@angular/material/button/testing';

I also have a tsconfig.json file with module: 'commonjs'.

---

My attempt

My understanding is that because @angular/material/button/testing is esm my tests have to be esm too.

So, as the error seemed to originate from ts-node, I have tried to configure it like this :

// wdio.config.ts
{
  autoCompileOpts: {
    tsNodeOpts: {
      moduleTypes: {
         './**/*.e2e.ts': 'esm'
      }
   }
}

This gave me the new following error :

[0-0] (node:4131) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /wdio-harness/test.e2e.ts
[0-0] require() of ES modules is not supported.
[0-0] require() of /wdio-harness/test.e2e.ts from /wdio-harness/node_modules/jasmine/lib/loader.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
[0-0] Instead change the requiring code to use import(), or remove "type": "module" from /wdio-harness/package.json.
[0-0] 
[0-0]     at createErrRequireEsm (/wdio-harness/node_modules/ts-node/dist-raw/node-cjs-loader-utils.js:97:15)
[0-0]     at assertScriptCanLoadAsCJSImpl (/wdio-harness/node_modules/ts-node/dist-raw/node-cjs-loader-utils.js:30:11)
[0-0]     at Object.require.extensions.<computed> [as .ts] (/wdio-harness/node_modules/ts-node/src/index.ts:1447:5)
[0-0]     at Module.load (internal/modules/cjs/loader.js:937:32)
[0-0]     at Function.Module._load (internal/modules/cjs/loader.js:778:12)
[0-0]     at Module.require (internal/modules/cjs/loader.js:961:19)
[0-0]     at require (internal/modules/cjs/helpers.js:92:18)
[0-0]     at Loader.requireShim [as require_] (/wdio-harness/node_modules/jasmine/lib/loader.js:26:5)
[0-0]     at /wdio-harness/node_modules/jasmine/lib/loader.js:19:18
[0-0]     at new Promise (<anonymous>)

We can see that now this is jasmine which seemed to complain about it.

I then found that Jasmine also has a jsLoader option to use ES modules.
(so I had to modified @wdio/jasmine-framework for that, and add the following line of code : this._jrunner.loadConfig({ jsLoader: 'import' });)

But still... a new error arose :

[0-0] (node:4295) UnhandledPromiseRejectionWarning: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /wdio-harness/test.e2e.ts
[0-0]     at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
[0-0]     at Loader.getFormat (internal/modules/esm/loader.js:105:42)
[0-0]     at Loader.getModuleJob (internal/modules/esm/loader.js:243:31)
[0-0]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[0-0]     at async Loader.import (internal/modules/esm/loader.js:177:17)
[0-0]     at async Jasmine._loadFiles (/wdio-harness/node_modules/jasmine/lib/jasmine.js:210:9)
[0-0]     at async Jasmine.loadSpecs (/wdio-harness/node_modules/jasmine/lib/jasmine.js:201:5)

---

Can you guys please give me some help or hints on this ? (as I'm now a bit confused on what really needs to be done..)

I know that wdio has not yet moved to esm, but I have the feeling that this is not required in my case and that only my tests needs it (ie. the pipe from jasmine to ts-node to my tests).
Am I wrong ?

Thanks! :)

What is your expected behavior?

No response

How to reproduce the bug.

1. Checkout the following project

git clone --branch features/ng13 [email protected]:Badisi/wdio-harness.git

2. Install the dependencies

npm install

3. Start the angular test application

npm run start:tests-app

4. Start the e2e tests in a separate process

npm run start:tests-e2e

Relevant log output

-

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

WebdriverIO currently doesn't support ESM modules, see also #6812

[Badisi]

I thought that #6812 was more about porting wdio to esm, so that it can be shipped as esm and be used in other environments too.

My use case here is simply being able to run a test written in esm.
And I thought that because wdio is using jasmine and ts-node, and that both are supporting esm, this could be feasible without the needs to completely rewrite wdio to esm ?

[christian-bromann]

Currently all TypeScript files are compiled down to use CommonJS. We can not just switch to ESM because both systems need to be supported for a while. Feel free to get involved in the effort of porting the codebase to ESM and make it available to CommonJS too. The PR I referred to was a first attempt but is blocked due to the fact that Jest currently doesn't fully support ESM. I am happy to take other directions.

[christian-bromann]

Created an umbrella task in #8306 and put it on the roadmap for v8.