Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support Angular 13 in CJS mode #1122

Merged
merged 1 commit into from
Nov 4, 2021
Merged

feat: support Angular 13 in CJS mode #1122

merged 1 commit into from
Nov 4, 2021

Conversation

ahnpnl
Copy link
Collaborator

@ahnpnl ahnpnl commented Oct 29, 2021

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.

@ahnpnl ahnpnl added the 💣 Breaking Changes Includes a breaking change and should probably wait until we're preparing for the release of a major label Oct 29, 2021
@Coly010
Copy link
Contributor

Coly010 commented Nov 3, 2021

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

@ahnpnl
Copy link
Collaborator Author

ahnpnl commented Nov 3, 2021

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
Copy link
Contributor

Coly010 commented Nov 3, 2021

@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!

@ahnpnl ahnpnl changed the title feat: support Angular 13 feat: support Angular 13 in CJS mode Nov 4, 2021
BREAKING CHANGE
* **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',
     },
}
```
@ahnpnl ahnpnl marked this pull request as ready for review November 4, 2021 11:13
@ahnpnl ahnpnl merged commit 12d3c6d into thymikee:main Nov 4, 2021
@ahnpnl ahnpnl deleted the angular-v13 branch November 4, 2021 11:14
@petebacondarwin
Copy link

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
Copy link
Contributor

Coly010 commented Nov 4, 2021

@ahnpnl 🎉 🔥 🚀 Thank you!!

@ahnpnl
Copy link
Collaborator Author

ahnpnl commented Nov 4, 2021

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

@just-jeb
Copy link

just-jeb commented Nov 4, 2021

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
Copy link
Collaborator Author

ahnpnl commented Nov 4, 2021

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
Copy link
Collaborator Author

ahnpnl commented Nov 4, 2021

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

@magnusbakken
Copy link

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
Copy link
Contributor

Coly010 commented Nov 4, 2021

@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
Copy link
Contributor

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

@BadalAccess
Copy link

I have the same problem too

@ahnpnl
Copy link
Collaborator Author

ahnpnl commented Nov 4, 2021

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

@b-johnse
Copy link

b-johnse commented Nov 4, 2021

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
Copy link
Contributor

Coly010 commented Nov 4, 2021

@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
Copy link

b-johnse commented Nov 4, 2021

@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
Copy link
Contributor

Coly010 commented Nov 4, 2021

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

@ahnpnl
Copy link
Collaborator Author

ahnpnl commented Nov 5, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💣 Breaking Changes Includes a breaking change and should probably wait until we're preparing for the release of a major
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support Angular v13
8 participants