Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "
AngularJasmineAngular MaterialAngular Material2MddialogAngular Problem Overview
I have a component which is meant to be used in an Angular Material MdDialog :
@Component({
...
})
export class MyComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef:
MdDialogRef<MyComponent>) {
...
}
}
I am trying to Unit Test it with Jasmine :
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
SharedTestingModule,
],
declarations: [
MyComponent,
],
})
.compileComponents();
}));
...
});
Unfortunately, I am getting the following error :
>Error: No provider for InjectionToken MdDialogData!
SharedTestingModule imports and exports my custom Angular Material module, which itself imports and exports MdDialogModule.
How can I get rid of this error?
Thank you very much!
Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3
Angular Solutions
Solution 1 - Angular
I added this :
providers: [
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide: MdDialogRef, useValue: {} }
]
And it works :)
Thanks for your help @methgaard!
Solution 2 - Angular
For Angular 5 with latest Material Component
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
and
providers: [
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide: MatDialogRef, useValue: {} }
]
Solution 3 - Angular
try this
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
SharedTestingModule,
],
declarations: [
MyComponent,
],
providers: [ <-- here
{
provide: MdDialogData,
useValue: {},
}
] <-- to here
})
.compileComponents();
}));
let me know how it goes
Solution 4 - Angular
as an update, this is also replicated for those who use the tags with the prefix "Mat"
providers: [{provide: MAT_DIALOG_DATA, useValue: {}},
{provide: MatDialogRef, useValue: {}}]
Solution 5 - Angular
you can inject MAT_DIALOG_DATA / MAT_BOTTOM_SHEET_DATA in jasmine tests without specifying a provider. you must simply ensure that the value being injected is non-null. if it is null, the compiler mistakes the null value for a non-existing provider and you get the provider not found error.
Solution 6 - Angular
You can use Angular Optional decorator, I faced this problem before so
if the component is not used as a popup try this snippet
constructor(
@Optional() public dialogRef: MatDialogRef<PopupComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}
Solution 7 - Angular
try add in your <x>.component.spec.ts
under providers
:
{ provide: MatDialog, useValue: {} }
in some cases you need also:
{ provide: MatDialogRef, useValue: {} }
(this way working in my angular 11 project)
Solution 8 - Angular
No provider for InjectionToken MatDialogData!, This error will occur when we run test cases, When we use matdialog reference with @Inject(MAT_DIALOG_DATA) public value: string, in the respected component.
Add below code in spec.ts file
providers: [MatDialogModule, { provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }]