testing-library/angular-testing-library

Zoneless Change Detection

Closed this issue · 1 comments

meierw commented

We recently migrated to Angular 18 and wanted to try out Zoneless Change detection. And it looks like we can get it to work with the regular TestBed, but not with angular-testing-library's render function.

As we can see here in the Angular docs. The experimental provider needs to be added to TestBed for things to work.
https://angular.dev/guide/experimental/zoneless#testing-and-debugging

So we were hoping we can do something similar in render.

await render(HomeComponent, {
  componentProviders: [provideExperimentalZonelessChangeDetection(),],
})

But alas we end up getting the following cryptic error. Does this mean that angular-testing-library simply isn't usable with zoneless at the moment, or are we doing something wrong?

TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')

      at getOwnDefinition (node_modules/.pnpm/@angular+core@18.0.1_rxjs@7.8.1_zone.js@0.14.6/node_modules/@angular/core/fesm2022/core.mjs:642:17)
      at getInjectableDef (node_modules/.pnpm/@angular+core@18.0.1_rxjs@7.8.1_zone.js@0.14.6/node_modules/@angular/core/fesm2022/core.mjs:632:12)
      at TestBedCompiler.overrideProvider (node_modules/.pnpm/@angular+core@18.0.1_rxjs@7.8.1_zone.js@0.14.6/node_modules/@angular/core/fesm2022/testing.mjs:903:59)
      at _TestBedImpl.overrideProvider (node_modules/.pnpm/@angular+core@18.0.1_rxjs@7.8.1_zone.js@0.14.6/node_modules/@angular/core/fesm2022/testing.mjs:1956:23)
      at Function.overrideProvider (node_modules/.pnpm/@angular+core@18.0.1_rxjs@7.8.1_zone.js@0.14.6/node_modules/@angular/core/fesm2022/testing.mjs:1761:37)
      at node_modules/.pnpm/@testing-library+angular@16.0.0_@angular+common@18.0.1_@angular+core@18.0.1_rxjs@7.8.1_zone.j_lyrjyujtyxtliaeytfgv7runj4/node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:69:17
          at Array.forEach (<anonymous>)
      at node_modules/.pnpm/@testing-library+angular@16.0.0_@angular+common@18.0.1_@angular+core@18.0.1_rxjs@7.8.1_zone.j_lyrjyujtyxtliaeytfgv7runj4/node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:67:10
      at fulfilled (node_modules/.pnpm/@testing-library+angular@16.0.0_@angular+common@18.0.1_@angular+core@18.0.1_rxjs@7.8.1_zone.j_lyrjyujtyxtliaeytfgv7runj4/node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:61:24)
meierw commented

Realized my mistake moments later.

Needed to use providers and not componentProviders.

  • 👍1