[jest] upgrading to Angular 13 throws errors

[matheo]

Describe the Bug

I'm trying to upgrade a website and the only broken ones are the tests :(

I've figured out to compile my testing utilities to es2020 and to follow the upgrade instructions of jest-preset-angular but I'm facing this blocker:

Expected Behavior

To run ng test successfully again. @just-jeb can you help me to figure out what do I need to avoid this error?

Environment

Libs
- @angular/core version: ~13.3.6
- @angular-devkit/build-angular: ~13.3.5
- @angular-builders/custom-webpack: ~13.1.0
- @angular-builders/jest: ~13.0.4-beta.0
- jest-preset-angular: 11.1.1
- jest: 27.5.1

For Tooling issues:
- Node version: v16.15.0
- Platform:  Ubuntu

[just-jeb]

Unfortunately mjs is not yet supported by @angular-builders/jest. It should be addressed and implemented properly like it was done with custom-webpack.
That means:

• Defining the API (there should be a switch that enables/disables ESM support, in order to support both CommonJs and ESM).
• Implementing the changes in code (imports instead of require, default .mjs imports from setup files etc.)
• Testing (having an E2E app that uses Jest builder in ESM mode)

That's not a huge amount of work, especially given there is already a good example from custom-webpack, but it still requires time.
It definitely should be supported and I'll try to get to this ASAP, but there are more important things (like v14 upgrade that is coming), so we're open for contributions 😄.

[matheo]

OMG, I see the custom esm and cjs settings in that PR, can we handle those by default on @angular-builders/jest? for v13 what are the requirements if I'm getting blocked by jest-runtime? can I apply a workaround?

Thanks in advance @just-jeb!

[matheo]

I've tried the jest-preset-angular esm example but my v12 bundles requiring the @angular/core files instead importing are another blocker.

I do need to run CommonJS and ESM at the same time with some indications I could help with this development, can you give me some hints @just-jeb?

[just-jeb]

I doubt it's possible to have ESM and CommonJS at the same time. Your app can be either CommonJS or ESM but not both of them.

[matheo]

@just-jeb @ahnpnl We're having this issue now:

We have @angular v12 packages trying to extend the classes from @angular/core v13 mjs I wonder if we can consume the available esm2015 bundles in our v12 packages with the ng-jest-resolver :thinking:

import { HttpClient, HttpHandler, HttpHeaders } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class HttpService extends HttpClient {

FYI we're trying [email protected] with [email protected] but I might try jest@latest if you guys recommend me that. Thanks in advance!

[arturovt]

@matheo are you able to provide a minimal reproducible example?

[arturovt]

Closing until a reproducible example provided. It's really hard to judge what's wrong on your side since we're not seeing your code...

Feel free to re-open once a reproducible example. We're then able to look and debug it.