question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when running test for angular material version 10 and jest

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
crisbetocommented, Aug 18, 2020

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

1reaction
billyjovcommented, Aug 27, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting | jest-preset-angular - GitHub Pages
When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ...
Read more >
Angular Material components fail tests - Stack Overflow
The error is pretty clear, your component doesn't understand the flexLayout directives because you didn't import it in the test module.
Read more >
Testing with component harnesses - Angular Material
By using the harness API, a test insulates itself against updates to the internals of a component, such as changing its DOM structure....
Read more >
Cannot find module '@angular/core/testing' - You.com
It seems that you are on an old version of Jest (version 26). Jest Preset Angular version 12 requires Jest version 28. According...
Read more >
Good testing practices with Angular Testing Library
In this case, it throws an exception because we're making use of reactive forms and some of the Angular Material components. To solve...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found