feat: support Angular 13 in CJS mode

[ahnpnl]

Summary

Closes #1090

Test plan

Green CI

Does this PR introduce a breaking change?

• Yes
• No

• NodeJs range version support now is ^12.20.0 || ^14.15.0 || >=16.10.0
• Due to the introduction of ESM package format for Angular packages, several things are added to the default preset to handle .mjs files from Angular ESM packages:
  • ng-jest-resolver is introduced as a custom Jest resolver to resolve .mjs files.
  • transformIgnorePatterns is added to inform Jest to transform .mjs files.
  • transform is updated to include .mjs extension to transform to CommonJS codes.

If one has custom Jest config, please make sure to adjust Jest config as following:

// jest.config.js
module.exports = {
     // other config
     resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
     transformIgnorePatterns: ['node_modules/(?!@angular)'],
     transform: {
        '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
     },
}

Other information

N.A.

[Coly010]

@ahnpnl hi, is there an ETA on when this will be completed and a release cut?

[ahnpnl]

Hi, currently I think it’s ok to have a release under next tag. Our e2e tests are fine with commonjs module, which should be good for common cases. ESM tests still have issues. I will finalize a next release this week.

[Coly010]

@ahnpnl Thanks for letting me know! From our testing, the resolver looks good and the tests in a test workspace were passing. Thank you for adding the support!

[petebacondarwin]

Congratulations on this @ahnpnl - it was not easy and I know you had to do a lot of work to get it right.
Will you update the project README with this information?
Also I see that you have created a v13 Angular example app. It would be great to showcase this more so that developers updating to v13 can easily see how to configure their jest setup to work.

[Coly010]

@ahnpnl 🎉 🔥 🚀 Thank you!!

[ahnpnl]

thanks for the suggestion!. I will definitely update the documentation

[just-jeb]

Hey @ahnpnl. Trying to figure out how to fix my build after upgrading the Jest Builder to Angular 13.
Updating to latest stable jest-preset-angular didn't help, so I'm wondering whether I should indeed update to next (which supposedly includes this fix) or there is another way (like fixing something within the test app).
I would prefer not to add an unstable dependency (next) as part of a stable release. What would you advise here?
Thanks!

[ahnpnl]

I haven't put a release for next tag yet which I will do today. I will keep next tag for a few days for testing purposes before rolling out to latest tag.

Since it's a breaking change so imo maybe you can also publish a next version on your side so community can test a bit before rolling out.

[ahnpnl]

I've published 11.0.0-rc.0 under next tag:) please try out.

[magnusbakken]

I get a not very clear error with 11.0.0-rc.0. Any idea what this might be?

Error: Cannot find module './src/host'
Require stack:
- F:\git\ProntoWeb\node_modules\jest-preset-angular\build\ngtsc\reflection\index.js
- F:\git\ProntoWeb\node_modules\jest-preset-angular\build\transformers\downlevel-ctor.js
- F:\git\ProntoWeb\node_modules\jest-preset-angular\build\compiler\ng-jest-compiler.js
- F:\git\ProntoWeb\node_modules\jest-preset-angular\build\ng-jest-transformer.js
- F:\git\ProntoWeb\node_modules\jest-preset-angular\build\index.js
- F:\git\ProntoWeb\node_modules\jest-util\build\requireOrImportModule.js
- F:\git\ProntoWeb\node_modules\jest-util\build\index.js
- F:\git\ProntoWeb\node_modules\jest-config\build\getCacheDirectory.js
- F:\git\ProntoWeb\node_modules\jest-config\build\Defaults.js
- F:\git\ProntoWeb\node_modules\jest-config\build\normalize.js
- F:\git\ProntoWeb\node_modules\jest-config\build\index.js
- F:\git\ProntoWeb\node_modules\jest-cli\build\init\index.js
- F:\git\ProntoWeb\node_modules\jest-cli\build\cli\index.js
- F:\git\ProntoWeb\node_modules\jest-cli\bin\jest.js
- F:\git\ProntoWeb\node_modules\jest\bin\jest.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (F:\git\ProntoWeb\node_modules\jest-preset-angular\build\ngtsc\reflection\index.js:5:27)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)

I can give more details about my setup later.

[Coly010]

@ahnpnl @magnusbakken I should have raised this last night! When doing my testing I noticed the src folder in ngtsc doesn't get included in the npm release anymore, causing the error above.

When doing local testing, I had to manually copy that folder (ngtsc/src) into the node_modules jest-preset-angular/build/ngtsc folder.

I'm not sure why it's no longer being included in the published bundle, but that is the cause of the error, and it'll likely cause problems for any consumer of the package.

[cedricduffournet]

I have the same problem, I wrote an issue #1133

[BadalAccess]

I have the same problem too

[ahnpnl]

should be fixed in 11.0.0-rc.1 which was already out

[b-johnse]

I just tried with 11.0.0-rc.1 and have an issue with local paths.
I use an nx workspace so imports from a local lib like @some-lib are not being handled, just error with "Cannot find module"

[Coly010]

@b-johnse that isn’t an issue with jest-preset-angular. I’m working on supporting Angular 13 in Nx currently. This won’t work for Nx until we ship that support in and 13.2.

You can keep an eye on progress here nrwl/nx#7161

[b-johnse]

@b-johnse that isn’t an issue with jest-preset-angular. I’m working on supporting Angular 13 in Nx currently. This won’t work for Nx until we ship that support in and 13.2.

You can keep an eye on progress here nrwl/nx#7161

Sounds good. I had changed the preset and transformer to match the docs here, so makes sense that custom tsconfig paths might not be picked up by the new transformer

[Coly010]

@b-johnse it’s actually the resolver, not the transformer. It’s the resolver that finds the correct path to the libs 🙂

[ahnpnl]

FYI the default resolver of this preset doesn’t break native Jest resolver regarding TypeScript paths, I’ve added e2e tests for that https://github.com/thymikee/jest-preset-angular/tree/main/e2e/path-mapping

Probably I will also update Angular 13 guide regarding to the default resolver so it’s clearer. Currently change log already mentioned it.