Components: Error when running test for angular material version 10 and jest

[kvanassche]

Reproduction

I created a angular cli project with a MatTable. I wrote a small spec file to check AppComponent (component with mat-table).

When using version ~9.1.0 of angular and ^9.2.4 of angular material, I can run the app.component.spec with a karma and a jest setup. However, when updating the project to version 10 with ng update --all, the test only runs with the karma setup.

Steps to reproduce:
table-app -cli-karma-v10.zip
table-app-cli-jest-v9.zip
table-app-cli-jest-v10.zip
table-app-cli-karma-v9.zip

1. Check out the different attached zips.
2. Run npm install
3. Run ng test

Stack trace for table-app-cli-jest-v10
``
TypeError: Cannot read property 'nativeElement' of undefined

  at MatTable.CdkTable (../src/cdk/table/table.ts:442:24)
  at new MatTable (../src/material/table/table.ts:20: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_.create (../packages/core/src/view/refs.ts:92:27)
  at initComponent (../packages/core/testing/src/test_bed.ts:618:28)
  at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:326:29)
  at NgZone.run (../packages/core/src/zone/ng_zone.ts:180:50)
  at TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:622:56)
  at Function.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:245:36)
  at src/app/app.component.spec.ts:25:23

``

Thanks in advance to have a look.

[crisbeto]

This has been fixed in version 10.0.10 of the Framework by https://github.com/angular/angular/pull/38463.

[michaelwestphal]

Having had the same issue originally reported above, I can thankfully report that the 10.0.10 update has resolved the issue for me!

[billyjov]

Same issue here .. Fixed with the newer version 10.0.10(in my case 10.0.14)

[AsmisAlan]

Hello, I recently update the version of angular material to ^10.1.3 and Im facing the same issue:

DebugComponent › should create

TypeError: Cannot read property 'nativeElement' of undefined

  at MatTable.CdkTable (../../../../src/cdk/table/table.ts:442:24)
  at new MatTable (../../../../src/material/table/table.ts:20: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_.create (../../../../packages/core/src/view/refs.ts:92:27)
  at initComponent (../../../../../packages/core/testing/src/test_bed.ts:618:28)
  at ZoneDelegate.invoke (../../../node_modules/zone.js/dist/zone.js:386:30)
  at ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/dist/proxy.js:117:43)
  at 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.invoke (../../../node_modules/zone.js/dist/zone.js:385:36)
  at Zone.run (../../../node_modules/zone.js/dist/zone.js:143:47)
  at NgZone.run (../../../../packages/core/src/zone/ng_zone.ts:180:50)
  at TestBedViewEngine.createComponent (../../../../../packages/core/testing/src/test_bed.ts:622:56)
  at Function.TestBedViewEngine.createComponent (../../../../../packages/core/testing/src/test_bed.ts:245:36)
  at src/lib/debug-styles/debug-styles.component.spec.ts:95:27
  at ZoneDelegate.invoke (../../../node_modules/zone.js/dist/zone.js:386:30)
  at ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/dist/proxy.js:117:43)
  at ZoneDelegate.invoke (../../../node_modules/zone.js/dist/zone.js:385:36)
  at Zone.run (../../../node_modules/zone.js/dist/zone.js:143:47)

[billyjov]

@AsmisAlan Just update Your angular version to the latest 10.0.14 : ng update @angular/core @angular/cli

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}