How to fix "Cannot read properties of undefined (reading 'TRIDENT')" in an Angular Unit Test
Nov 12,
I don't have a good answer for this one...
I'm getting an error like this from an Angular unit tests:
TypeError: Cannot read properties of undefined (reading 'TRIDENT') at new NativeDateAdapter (node_modules/@angular/material/fesm2015/core.js:575:1) at new AppDateAdapter (main.js:219772:5) at NodeInjectorFactory.AppDateAdapter_Factory [as factory] (ng:///AppDateAdapter/?fac.js:4:10) at getNodeInjectable (node_modules/@angular/core/fesm2015/core.js:3549:1) at searchTokensOnInjector (node_modules/@angular/core/fesm2015/core.js:3486:1) at getOrCreateInjectable (node_modules/@angular/core/fesm2015/core.js:3430:1) at Module.??directiveInject (node_modules/@angular/core/fesm2015/core.js:14737:1) at NodeInjectorFactory.MatDatepickerInput_Factory [as factory] (node_modules/@angular/material/fesm2015/datepicker.js:3386:174) at getNodeInjectable (node_modules/@angular/core/fesm2015/core.js:3549:1) at searchTokensOnInjector (node_modules/@angular/core/fesm2015/core.js:3486:1) TypeError: Cannot read properties of undefined (reading 'setManagerModel') at UserContext.(my-comp.spec.ts:404:29) at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1) at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:371:1) at Zone.run (node_modules/zone.js/fesm2015/zone.js:134:1) at runInTestZone (node_modules/zone.js/fesm2015/zone-testing.js:567:1) at UserContext. (node_modules/zone.js/fesm2015/zone-testing.js:582:1) at
I want to iterate the app works perfectly, this is only a problem when running unit tests.
We're using the MatDatepickerModule with a custom date adapter.
That means somewhere in the code, we are importing the MatDatepickerModule as part of an NgModule definition. And from there we are defining a custom date adapter as part of the component's metadata, like this:
2 selector: 'app-temp',
3 templateUrl: 'temp.component.html',
4 styleUrls: ['temp.scss'],
5 providers: [
6 {
7 provide: DateAdapter,
8 useClass: MyCustomDateAdapter
9 } ]
10})
I've been banging my head on this for a day. I found two solutions.
First, if we run unit tests with code coverage turned off, it works fine. Instead of this:
Do this:
That kind of sucks, because we want to keep track of our code coverage.
The second solution is to not import the Angular Material Date Picker into the test:
The testbed setup might be like this:
2 declarations: [ProductOverrideSchedulerComponent, SetOverrideSchedulerPriorityRowComponent],
3 imports: [
4 HttpClientTestingModule,
5 // other stuff
6 MatDatepickerModule
7 ],
8 providers: [
9 ]
10 })
But, you just remove the date picker module from the test:
2 declarations: [ProductOverrideSchedulerComponent, SetOverrideSchedulerPriorityRowComponent],
3 imports: [
4 HttpClientTestingModule,
5 // other stuff
6 ],
7 providers: [
8 ]
9 })
And that solved it too.
This is a bit bizarre and I should probably should try to write up a formal bug ticket or stack overflow post about this. For the moment, I've just removed the MatdatepickerModule from my test since it unblocks me and doesn't care other issues.