Angular测试报错NG0204：无法解析MatDialogRef参数求助

测试ConfirmationPopupComponent组件时触发NG0204错误，提示“Can't resolve all parameters for MatDialogRef: (?, ?)”。已尝试将MatDialogRef添加到测试配置的providers中，但问题仍未解决。

confirmation-popup.component.ts #

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-confirmation-popup',
  templateUrl: './confirmation-popup.component.html',
  styleUrls: ['./confirmation-popup.component.scss']
})
export class ConfirmationPopupComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<ConfirmationPopupComponent>, @Optional() @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
    console.log(this.data)
  }

  
  closeYesModel() {
    this.dialogRef.close('Yes');
  }

  
  closeNoModel() {
    this.dialogRef.close('NO');
  }

  closeModel(){
    this.dialogRef.close('NO');
  }

}

confirmation-popup.component.spec.ts（原测试代码） #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { RouterTestingModule } from '@angular/router/testing';

import { ConfirmationPopupComponent } from './confirmation-popup.component';

describe('ConfirmationPopupComponent', () => {
  let component: ConfirmationPopupComponent;
  let fixture: ComponentFixture<ConfirmationPopupComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
        declarations: [ ConfirmationPopupComponent ],
        imports: [RouterTestingModule,
                  MatDialogModule],
         providers: [{
          provide: MAT_DIALOG_DEFAULT_OPTIONS,
          useValue: {hasBackdrop: false}},
          MatDialogRef],

    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ConfirmationPopupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

错误信息 #

ConfirmationPopupComponent > should create
Error: NG0204: Can't resolve all parameters for MatDialogRef: (?, ?).
error properties: Object({ code: 204 })
Error: NG0204: Can't resolve all parameters for MatDialogRef: (?, ?).
    at getUndecoratedInjectableFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11501:1)
    at injectableDefOrInjectorDefFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11491:1)
    at providerToFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11534:1)
    at providerToRecord (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11521:1)
    at R3Injector.processProvider (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11424:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11410:1
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:4162:1
    at Array.forEach (<anonymous>)
    at deepForEach (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:4162:1)
    at R3Injector.processInjectorType (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11410:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/shared/components/confirmation-popup/confirmation-popup.component.spec.ts:32:23)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)

解决方案 #

问题根源是测试配置中直接将MatDialogRef加入providers数组。MatDialogRef是抽象类，Angular无法直接实例化它，必须提供模拟对象或用useValue/useClass注入模拟实现。

修改测试文件的providers配置，替换MatDialogRef为模拟对象，同时可按需添加MAT_DIALOG_DATA的模拟数据：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { RouterTestingModule } from '@angular/router/testing';

import { ConfirmationPopupComponent } from './confirmation-popup.component';

describe('ConfirmationPopupComponent', () => {
  let component: ConfirmationPopupComponent;
  let fixture: ComponentFixture<ConfirmationPopupComponent>;
  let mockDialogRef: jasmine.SpyObj<MatDialogRef<ConfirmationPopupComponent>>;

  beforeEach(async () => {
    // 创建MatDialogRef的模拟对象，模拟close方法
    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);

    await TestBed.configureTestingModule({
        declarations: [ ConfirmationPopupComponent ],
        imports: [RouterTestingModule, MatDialogModule],
         providers: [
           {
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: {hasBackdrop: false}
           },
           {
             provide: MatDialogRef,
             useValue: mockDialogRef
           },
           // 可选：如果需要测试data参数，添加模拟数据
           {
             provide: MAT_DIALOG_DATA,
             useValue: { message: '测试确认信息' }
           }
         ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ConfirmationPopupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  // 可选：测试closeYesModel方法是否正确调用dialogRef.close
  it('should call dialogRef.close with "Yes" when closeYesModel is called', () => {
    component.closeYesModel();
    expect(mockDialogRef.close).toHaveBeenCalledWith('Yes');
  });
});

修改后重新运行测试即可解决NG0204错误。

内容的提问来源于stack exchange，提问作者Mayuri Jadhav