Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'
AngularAngular MaterialKarma JasmineJestjsAngular Problem Overview
I'm getting following error when I try to test an angular component:
Error while running jest tests:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.
Here is my html:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>`
I'm using "@angular/material": "6.1.0",
in my package.json.
I've also imported all the required material dependencies in the beforeAll
block under TestBed
I also tried changing the property of the button from matMenuTriggerFor
to mat-menu-trigger-for
. It didn't work.
Please suggest how can I fix this test.
Angular Solutions
Solution 1 - Angular
Import MatMenuModule
in your feature Module OR the Module where this component resides in.
import { MatMenuModule} from '@angular/material/menu';
and
imports: [
MatMenuModule
]
Solution 2 - Angular
I think you need to add the MatMenuModule import to your app.module file.
Solution 3 - Angular
Random but in case someone was searching like me: I was importing a custom angular material library and building the consuming library before building the material library. when I built the material library first then the consuming library was about to see the MatMenuModule and errors went away.
I changed
"library:build": "npm run ng7-common:build" && npm run ng8-material:build
to:
"library:build": " npm run ng8-material:build && npm run ng7-common:build"
Solution 4 - Angular
Check the spelling I had one g
in word trigger
that cost me this error
[matMenuTrigerData] => [matMenuTriggerData]
Solution 5 - Angular
I got this (and several other errors) because I failed to add the component to the declarations
array in the lib.module.ts
file.
Solution 6 - Angular
I was getting this error while running jest
test. I had to add MatMenuModule
in the import array of TestBed.configureTestingModule
to resolve this error.
Solution 7 - Angular
If imports at other module, you need export MatMenuModule.
At your module, place:
... exports: [MatMenuModule], ...