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:

view plain print about
1@Component({
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:

view plain print about
1ng test --code-coverage=true

Do this:

view plain print about
1ng test

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:

view plain print about
1TestBed.configureTestingModule({
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:

view plain print about
1TestBed.configureTestingModule({
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.

This entry was posted on November 12, 2021 at 3:00 PM

posted by Jeffry Houser in ngMaterial, Karma, ng material, Professional, Angular, Jasmine
| 0 Comments Bookmark and Share