question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

run ngcc when using ng test to run test with ivy

See original GitHub issue

Describe the solution you’d like When running ng test with

"test": {
          "builder": "@angular-builders/jest:run",
          "options": {
          }

inside angular.json, it should run ngcc beforehand as angular-cli already does (see: https://github.com/angular/angular-cli/pull/15044#issue-296489062). Otherwise, tests are not running with ivy, which should be the default for angular 9. As this might break existing tests, an options flag like "enableIvy": false could still be added in order to run them the old way. Or just use the configuration that’s already existing in tsconfig.spec.ts which usually points to tsconfig.ts that has "enableIvy": false already defined.

Describe alternatives you’ve considered The only way I could make it work is by defining a scripts inside package.json.

{
  "scripts": {
    "test": "ngcc && ng test"
  }
}

and then execute it with npm run test. It would still be great to just run it with ng test

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
just-jebcommented, Feb 18, 2020

Here are my findings:

  • ngcc transforms libraries, typically node_modules (js files and dts), to make them Ivy compatible. It is necessary, especially if you want to have meaningful error messages when your test fails.
  • For node_modules it’s enough to run ngcc only once, for example in postinstall hook to ensure compatibility.
  • There is a very specific use case when you need to run ngcc on modules other than node_modules - when you have a monorepo with libraries and you reference the production bundles of these libraries (dist folders) from your app’s tsconfig.
  • Angular CLI commands (build, serve, karma) use ngtools/webpack and as part of Webpack compilation they run ngcc_processor on each non-relative module, which essentially handles the case of monorepo with libraries. It also eliminates the need to run ngcc for the whole node_modules and only runs it for the files that are part of the compilation.

Conclusion: Running ngcc as a postinstall hook might be a viable workaround for 95% of projects, so we have to include it in the documentation and the migration guide.
However, the only solution that will handle all the use cases properly is adding a custom Jest transformer that will apply ngcc_processor from ngtools/webpack to all the non-relative modules similarly to Angular CLI.
I seriously doubt though that this transformer should be implemented here and not in jest-preset-angular.

1reaction
just-jebcommented, May 10, 2020

Unfortunately, currently this is the only way. A few things you can do:

  1. Cache node_modules on CI workers
  2. Identify the modules that require ngcc run and run it on them specifically (instead of the whole node_modules folder).
  3. Watch this issue to see whether there will be some solution. Here is some more info.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Ivy | jest-preset-angular - GitHub Pages
To make sure that Jest uses the Angular Ivy, you must run ngcc before running tests. ngcc will transform all Angular-format packages to...
Read more >
Angular 11 is not running ngcc - ivy - Stack Overflow
run rm -fr node_modules and then npm install . this example is an idea if you use CI, otherwise you can just use...
Read more >
Angular CLI: “ng test” with Jest in 3 minutes - Just Jeb
After you've done that ng test will run tests for all the projects. If you want to run tests for a specific project...
Read more >
@angular-builders/jest - npm
Jest runner for Angular build facade. Allows ng test run with Jest instead of Karma. Latest version: 15.0.0, last published: 5 days ago....
Read more >
Angular v13 is now Available
Get Angular v13 now by running ng update in your project. ... The DOM is now cleaned after every test and developers can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found