Problems with Angular 12 + Jest #740

votdev · 2021-05-20T13:21:58Z

I'm currently migrating an Angular 11 (and gridster 11.2.0) project to Angular 12 (and gridster 12.0.0). The migration went fine and the app is running, but my unit tests using Jest are failing.

 FAIL  src/app/pages/dashboard-page/dashboard-page.component.spec.ts
  ● DashboardPageComponent › should create

    Failed: "Failed to load gridster.html"

      12 |   let fixture: ComponentFixture<DashboardPageComponent>;
      13 |
    > 14 |   beforeEach(async () => {
         |   ^
      15 |     await TestBed.configureTestingModule({
      16 |       imports: [
      17 |         HttpClientTestingModule,

      at Env.beforeEach (node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:46:24)
      at context.<computed> (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4309:39)
      at Suite.<anonymous> (src/app/pages/dashboard-page/dashboard-page.component.spec.ts:14:3)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Suite.<anonymous> (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4227:33)

  ● DashboardPageComponent › should create

    This test module uses the component GridsterComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.

      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (../packages/core/testing/src/test_bed.ts:385:17)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:586:10)
      at Function.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:237:36)
      at src/app/pages/dashboard-page/dashboard-page.component.spec.ts:27:23
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Another failure looks like:

Error: Failed: "Failed to load gridsterPreview.css"
Error: 
    at Env.beforeEach (/home/vot/git/aquarium/src/glass/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:46:24)
    at beforeEach (/home/vot/git/aquarium/src/glass/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:118:29)
    at context.<computed> (/home/vot/git/aquarium/src/glass/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4309:39)
    at Suite.<anonymous> (/home/vot/git/aquarium/src/glass/src/app/pages/dashboard-page/dashboard-page.component.spec.ts:14:3)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (/home/vot/git/aquarium/src/glass/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
    at Zone.Object.<anonymous>.Zone.run (/home/vot/git/aquarium/src/glass/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
    at Suite.<anonymous> (/home/vot/git/aquarium/src/glass/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4227:33)
    at addSpecsToSuite (/home/vot/git/aquarium/src/glass/node_modules/jest-jasmine2/build/jasmine/Env.js:444:51)
    at Env.describe (/home/vot/git/aquarium/src/glass/node_modules/jest-jasmine2/build/jasmine/Env.js:414:11)
    at describe (/home/vot/git/aquarium/src/glass/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:88:18)

The test is initialized the following way. Because of that the suggestion This test module uses the component GridsterComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. is irrelevant.

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        PagesModule,
        BrowserAnimationsModule,
        RouterTestingModule,
        TranslateModule.forRoot()
      ]
    }).compileComponents();
  });

With Angular 11 and angular-gridster2 11.2.0 everything was fine. Does anyone have an idea what is going wrong?

The text was updated successfully, but these errors were encountered:

tiberiuzuld · 2021-05-20T14:57:09Z

Hi @votdev ,
No idea, why is this happening, my tests with karma in the application are running without issues.
I assume the tests configuration run build on the components before testing them.
Do you use aot: true for the tests?
Do you have ivy enabled ?
Maybe it has something with this new option compilationMode
https://github.com/tiberiuzuld/angular-gridster2/blob/master/projects/angular-gridster2/tsconfig.lib.prod.json
https://angular.io/guide/angular-compiler-options#compilationmode
I can switch it to full but don't know what repercussions will have for the others.
The automatic migration of the angular-cli has set that one to partial

votdev · 2021-05-20T15:24:38Z

Maybe it has something with this new option compilationMode
https://github.com/tiberiuzuld/angular-gridster2/blob/master/projects/angular-gridster2/tsconfig.lib.prod.json
angular.io/guide/angular-compiler-options#compilationmode

According to https://blog.lacolaco.net/2021/02/angular-ivy-library-compilation-design-in-depth-en/ the current mode partial seems to be the right one.

I found a workaround by using the following in package.json.

{
  "scripts": {
    ...
    "test:ci": "ngcc && jest",

Using

{
  "scripts": {
    ...
    "postinstall": "ngcc",

will finally solve the issue. Check just-jeb/angular-builders#679 (comment) for more details.

Shall we close this issue or keep it open? I'm sure i'm not the only one who stumbles over that .

SebastianStehle · 2021-06-01T14:36:44Z

I have a similar issue in production build: It shows: app.js?35bcaeb422be6d8ec610:2 ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

The output still contains template strings but only for angular-gridster2.

Even after running there is no __ivy_ngcc__ folder for angular-gridster2. It works with 11.2.0

michaelfaith · 2021-08-09T22:09:58Z

@tiberiuzuld I'm seeing a similar issue in a library I'm responsible for, which is set for partial Ivy. Specifically getting an error simlar to this one: Error: Failed: "Failed to load gridsterPreview.css" when running tests with Jest on an app that uses it, but it's for the template html of the component. Went Googling and found a similar issue here. I think I'll try turning Ivy back off and seeing if maybe that helps. Though that'll only be a band-aid, since full Ivy is on the way.

michaelfaith · 2021-08-11T12:59:28Z

I created a bug in the jest-preset-angular repo for this issue, and provided a repo that demonstrates the issue, using this gridster library.

michaelfaith · 2021-08-11T15:32:17Z

We've found that running ngcc after install (postinstall on the top level package.json) solves the issue.

tapio-fuusor · 2021-08-19T08:39:53Z

Hi @votdev ,
No idea, why is this happening, my tests with karma in the application are running without issues.
I assume the tests configuration run build on the components before testing them.
Do you use aot: true for the tests?
Do you have ivy enabled ?
Maybe it has something with this new option compilationMode
https://github.com/tiberiuzuld/angular-gridster2/blob/master/projects/angular-gridster2/tsconfig.lib.prod.json
https://angular.io/guide/angular-compiler-options#compilationmode
I can switch it to full but don't know what repercussions will have for the others.
The automatic migration of the angular-cli has set that one to partial

We also have this issue, we are building AOT but seems that the builder does not rebuild linked libraries to AOT compatible, could not make it work even with running ngcc.
Would it be possible to change the compilationMode to full? We have many linked libraries in use and Gridsters is the only one with partial setting and also the only one with issues on 11->12 migration.

michaelfaith · 2021-08-19T10:10:39Z

I would definitely discourage changing compilationMode to anything but partial right now. The Angular team has laid out a pretty well-defined plan for their migration to full Ivy, and this stage of the plan is in the middle of that journey. If you look at my reproduction repo (which uses this library for demonstrating the problem), running ngcc solved the issue: https://github.com/michaelfaith/ang12-jest-yarn-bug So it could be something more wrong with your setup. Are you able to reproduce it in a repro repo?

tapio-fuusor · 2021-08-23T13:51:41Z

I would definitely discourage changing compilationMode to anything but partial right now. The Angular team has laid out a pretty well-defined plan for their migration to full Ivy, and this stage of the plan is in the middle of that journey. If you look at my reproduction repo (which uses this library for demonstrating the problem), running ngcc solved the issue: https://github.com/michaelfaith/ang12-jest-yarn-bug So it could be something more wrong with your setup. Are you able to reproduce it in a repro repo?

It seems to be an issue with custom webpack builds, I can't find a way to force custom webpack to build AOT version of gridster component. Here is the same issue but without answer: https://stackoverflow.com/questions/68850485/can-ngtools-webpack-angularwebpackplugin-link-partially-compiled-ivy-libraries
Using jitMode: true works, but it includes the whole AOT compiler with the bundle.

michaelfaith · 2021-08-23T14:35:09Z

Out of curiosity, why use custom webpack for building, rather than the regular Angular builder setup?

TimoPot · 2022-01-07T11:41:54Z

For me the following solved a lot of my issues:

https://thymikee.github.io/jest-preset-angular/docs/guides/angular-ivy/

AbdulKhader4123 · 2023-06-16T13:20:53Z

i had the same issue
the below script from package.json solved my problem.
"postinstall": "ngcc --properties es2015 browser module main",

tiberiuzuld mentioned this issue Jun 6, 2021

Building a library using angular-gridster2@12.0.2 with Angular12 fails #741

Closed

michaelfaith mentioned this issue Aug 10, 2021

Yarn Workspace Monorepo + Library Built with Angular 12 + Jest Throws an Error thymikee/jest-preset-angular#980

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problems with Angular 12 + Jest #740

Problems with Angular 12 + Jest #740

votdev commented May 20, 2021 •

edited

Loading

tiberiuzuld commented May 20, 2021

votdev commented May 20, 2021 •

edited

Loading

SebastianStehle commented Jun 1, 2021 •

edited

Loading

michaelfaith commented Aug 9, 2021

michaelfaith commented Aug 11, 2021

michaelfaith commented Aug 11, 2021

tapio-fuusor commented Aug 19, 2021

michaelfaith commented Aug 19, 2021 •

edited

Loading

tapio-fuusor commented Aug 23, 2021

michaelfaith commented Aug 23, 2021

TimoPot commented Jan 7, 2022

AbdulKhader4123 commented Jun 16, 2023

Problems with Angular 12 + Jest #740

Problems with Angular 12 + Jest #740

Comments

votdev commented May 20, 2021 • edited Loading

tiberiuzuld commented May 20, 2021

votdev commented May 20, 2021 • edited Loading

SebastianStehle commented Jun 1, 2021 • edited Loading

michaelfaith commented Aug 9, 2021

michaelfaith commented Aug 11, 2021

michaelfaith commented Aug 11, 2021

tapio-fuusor commented Aug 19, 2021

michaelfaith commented Aug 19, 2021 • edited Loading

tapio-fuusor commented Aug 23, 2021

michaelfaith commented Aug 23, 2021

TimoPot commented Jan 7, 2022

AbdulKhader4123 commented Jun 16, 2023

votdev commented May 20, 2021 •

edited

Loading

votdev commented May 20, 2021 •

edited

Loading

SebastianStehle commented Jun 1, 2021 •

edited

Loading

michaelfaith commented Aug 19, 2021 •

edited

Loading