Problems with Angular 12 + Jest

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?

[michaelfaith]

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

[TimoPot]

For me the following solved a lot of my issues:

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