Webdriver e2e spec tests fail after upgrading to Angular 13. Unknown file extension ".ts"

Question

I run my Angular e2e tests using WDIO now that I know Protractor is going away.

They worked fine in Angular 12.

After upgrading to Angular 13, I get this error when running my tests:

Execution of 2 workers started at 2021-11-12T00:21:55.176Z

[0-0] RUNNING in chrome - /e2e/specs2/app.spec.ts
[0-1] RUNNING in chrome - /e2e/specs2/user/user-register/user-register.spec.ts
[0-1] 2021-11-12T00:21:57.528Z ERROR @wdio/runner: Error: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
[0-1] `browser` object has only `capabilities` and some flags like `isMobile`.
[0-1] Helper files that use other `browser` commands have to be moved to `before` hook.
[0-1] Spec file(s): /home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/e2e/specs2/user/user-register/user-register.spec.ts
[0-1] Error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/e2e/specs2/user/user-register/user-register.spec.ts
[0-1]     at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:65:15)
[0-1]     at Loader.getFormat (internal/modules/esm/loader.js:116:42)
[0-1]     at Loader.getModuleJob (internal/modules/esm/loader.js:247:31)
[0-1]     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0-1]     at async Loader.import (internal/modules/esm/loader.js:181:17)
[0-1]     at async formattedImport (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
[0-1]     at async Object.exports.requireOrImport (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/mocha/lib/nodejs/esm-utils.js:48:32)
[0-1]     at async Object.exports.loadFilesAsync (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/mocha/lib/nodejs/esm-utils.js:88:20)
[0-1]     at async MochaAdapter._loadFiles (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/@wdio/mocha-framework/build/index.js:68:13)
[0-1]     at async MochaAdapter.init (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/@wdio/mocha-framework/build/index.js:54:9)
[0-1]     at MochaAdapter._loadFiles (/home/steve/source/repos/fnm/FishNet/Merchandise-Microservices/Web/SPA/node_modules/@wdio/mocha-framework/build/index.js:85:35)
[0-1]     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0-1]  Error:  Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.

It happens because of this statement:

import { InjectionToken } from '@angular/core';
...
    const Register_FM = new InjectionToken('register.formModel');

My theory is Typescript 4.4.4 is the issue somewhere:

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html#breaking-changes

Any JS module experts out there have a clue?

user_558509 · Answer

OK, I figured it out.

Angular 13 now compiles to ES2020 modules and my test spec files were compiled to CommonJS which can't import from ES2020.

I have had to switch my test spec files to ES2020 which needs a lot of hacking around at the moment.

With ES2020 output, Typescript currently generates .js files that contain import statements without the '.js' file extension which the ESM loader cannot find.

I now need to create a script that specifically adds these '.js' extensions to the generated ES2020 code so my tests finally can import the Angular exports and actually run!! yay.

Hopefully, Typescript 4.5 is going to help out with ES2020 modules.. We'll see..

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html

Webdriver e2e spec tests fail after upgrading to Angular 13. Unknown file extension ".ts"

1 Answers