This question is the result of a previous attempt to upgrade an older Angular/Electron app to the latest version of each; I was able to migrate the frontend of the app from Angular 9 to Angular 12 before running into the issue described here.
The app has a test suite that runs successfully in Angular 12. While the app itself appears to run well after performing an upgrade to Angular 13 through Angular-CLI, running Mocha after all these upgrades will throw the following error:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\<REDACTED_BY_AUTHOR>\src\renderer\src\app\app.component.spec.ts
at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:65:15)
at Loader.getFormat (internal/modules/esm/loader.js:116:42)
at Loader.getModuleJob (internal/modules/esm/loader.js:247:31)
at async Loader.import (internal/modules/esm/loader.js:181:17)
To my understanding, Angular 13's packaging now produces ES2020 modules by default, however, Mocha in a Typescript environment still uses CommonJS. I've tried the following so far:
Adding a "loader": ["ts-node/esm"] statement to mocharc.json. This allows Mocha/Typescript to start transpiling test files, but also results in errors in the interrim transpiled code. For example:
TSError: ⨯ Unable to compile TypeScript: src/test/utils/root.hooks.ts:2:58 - error TS2774:
This condition will always return true since this function is always defined. Did you mean to call it instead?
2 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
Upgrading to the latest version of ts-node. This has no apparent effect.
Updating the module property in tsconfig.test.json from CommonJS (derived from the main Typescript file) to ES2020. This results in SyntaxError: Cannot use import statement outside a module errors. My understanding is that fixing this would put me down the tricky path of refactoring the test suite to wrap Mocha tests in modules, which is something I don't yet understand how to do.
With that in mind, how can I bring my test suite in compliance? The way I see it, there's three options. First, I could either look for some combination of Angular, Typescript, and Mocha options that allows me to use the existing test suite with limited modifications if any. The second option is to attempt the Mocha/ESM refactor, which would presumably require significant (if boilerplate-heavy) changes to our test suite. A final and more out of the box option is to try migrating to Jest; while this sounds orthogonal even to me, I'm aware that there are automated tools that make switching a test suite from using Mocha to Jest easier; Jest also has more comprehensive documentation (even including the ESM changes in Angular 13) and appears to work better out of the box with Angular. What's the best way to proceed?
For reference, I've included some configuration files. First, our default tsconfig.json file (though only the options changed from the defaults):
{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"lib": ["es2018", "dom"],
"outDir": "out",
"strict": true
"noImplicitAny": true
"esModuleInterop": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"useUnknownInCatchVariables": false
}
}
tsconfig.test.json overrides:
"compilerOptions": {
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
},
And finally, mocharc.json:
{
"extension": ["ts"],
"timeout": 20000,
"spec": ["./src/test/utils/root.hooks.ts", "src/**/*.spec.ts"],
"exclude": ["**/node_modules/**/*"],
"require": ["ts-node/register", "./src/test/setup.js"],
"loader": ["ts-node/esm"]
}
Copyright Notice：Content Author:「Jessica Kagan」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/72062115/mocha-tests-no-longer-run-after-upgrading-an-angular-12-app-to-angular-13