Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "

AngularJasmineAngular MaterialAngular Material2Mddialog

Angular 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: {} }]

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionWenneguenView Question on Stackoverflow
Solution 1 - AngularWenneguenView Answer on Stackoverflow
Solution 2 - AngularKamruzzamanView Answer on Stackoverflow
Solution 3 - AngularmethgaardView Answer on Stackoverflow
Solution 4 - Angularmehs2690View Answer on Stackoverflow
Solution 5 - AngularBobView Answer on Stackoverflow
Solution 6 - AngularMustafa OmranView Answer on Stackoverflow
Solution 7 - Angularofir_aghaiView Answer on Stackoverflow
Solution 8 - AngularSreehari BallampalliView Answer on Stackoverflow