Angular mat-table unit test, Cannot read property ‘nativeElement’ of undefined

  angular, angular-material, mat-table

I’m getting this error when running unit test (using Jest):
TypeError: Cannot read property 'nativeElement' of undefined

Stacktrace:

      at MatTable.CdkTable (../src/cdk/table/table.ts:460:24)
      at new MatTable (../src/material/table/table.ts:21:1)
      at NodeInjectorFactory.MatTable_Factory [as factory] (node_modules/@angular/material/bundles/material-table.umd.js:345:55)
      at getNodeInjectable (../packages/core/src/render3/di.ts:548:38)
      at instantiateAllDirectives (../packages/core/src/render3/instructions/shared.ts:1285:23)
      at createDirectivesInstances (../packages/core/src/render3/instructions/shared.ts:582:3)
      at ɵɵelementStart (../packages/core/src/render3/instructions/element.ts:117:5)
      at OrderClaimsTableComponent_Template (ng:/OrderClaimsTableComponent.js:449:9)
      at executeTemplate (../packages/core/src/render3/instructions/shared.ts:553:5)
      at renderView (../packages/core/src/render3/instructions/shared.ts:345:7)
      at renderComponent (../packages/core/src/render3/instructions/shared.ts:1740:3)
      at renderChildComponents (../packages/core/src/render3/instructions/shared.ts:148:5)
      at renderView (../packages/core/src/render3/instructions/shared.ts:374:7)
      at ComponentFactory.Object.<anonymous>.ComponentFactory.create (../packages/core/src/render3/component_ref.ts:226:7)
      at initComponent (../../packages/core/testing/src/r3_test_bed.ts:355:28)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:308:29)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)
      at NgZone.Object.<anonymous>.NgZone.run (../packages/core/src/zone/ng_zone.ts:180:50)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../../packages/core/testing/src/r3_test_bed.ts:358:37)
      at Function.Object.<anonymous>.TestBedRender3.createComponent (../../packages/core/testing/src/r3_test_bed.ts:183:33)
      at src/app/orders-claims/order-claims-queue/order-claims-table/order-claims-table.component.spec.ts:56:23
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)

I removed everything in my template leaving my html as:

<table mat-table [dataSource]="dataSource">

</table>

and I still get the error. dataSource is initiated at the top of the class as dataSource = new MatTableDataSource<any>();

The data prop for data source is set inside ngOnInit with this.dataSource.data = []; and the actual values are set by a method called inside ngOnChanges.

I tried tracing back to that ../src/cdk/table/table.ts file but I can’t for the life of me find it.

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.