Angular table component jest tests not passing with cdkTable 10.1.3

Question

I am testing locally MatTable with different name 'PsTableComponent' and trying to run jest tests. However PsTableComponent (which extends cdkTable like the original MatTable component) with jest gives the following error:

TypeError: Cannot read property 'nativeElement' of undefined
    at PsTableComponent.CdkTable (../src/cdk/table/table.ts:442:24)
      at new PsTableComponent (table.ts:7:1)
      at createClass (../packages/core/src/view/provider.ts:273:14)
      at createDirectiveInstance (../packages/core/src/view/provider.ts:142:7)
      at createViewNodes (../packages/core/src/view/view.ts:314:28)
      at callViewAction (../packages/core/src/view/view.ts:647:7)
      at execComponentViewsAction (../packages/core/src/view/view.ts:570:7)
      at createViewNodes (../packages/core/src/view/view.ts:342:3)
      at createRootView (../packages/core/src/view/view.ts:216:3)
      at callWithDebugContext (../packages/core/src/view/services.ts:638:23)
      at Object.debugCreateRootView [as createRootView] (../packages/core/src/view/services.ts:119:10)
      at ComponentFactory_.Object.<anonymous>.ComponentFactory_.create (../packages/core/src/view/refs.ts:92:27)
      at initComponent (../packages/core/testing/src/test_bed.ts:618: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:326: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 TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:622:56)
      at Function.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:245:36)
      at src/app/mass-payment/receipts/receipts.component.spec.ts:73: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)
      at Object.testBody.length (node_modules/jest-preset-angular/zone-patch/index.js:52:27)

Which leads to cdkTable:

https://github.com/angular/components/blob/10.1.x/src/cdk/table/table.ts#L442

Dependencies:

    "@angular/animations": "^10.0.5",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "^10.0.5",
    "@angular/compiler": "^10.0.5",
    "@angular/core": "^10.0.5",
    "@angular/forms": "^10.0.5",
    "@angular/material": "^10.1.1"..

Does anybody have any idea what is causing the issue?

Answer 1

Somewhere in your test case: ex:

yourVariable.nativeCode.(....)

You must check whether yourVariable implements DebugElement interface. And is the entire test component correctly initiated.