如何对调用MatDialog open方法的Angular弹窗函数进行单元测试

核心思路：不需要真实渲染ParamGameComponent，仅验证openPram方法是否正确调用MatDialog的open方法、传入参数符合预期即可。

第一步：配置测试模块依赖 #

在组件对应的.spec.ts测试文件中，使用Mock版本的MatDialog配置测试模块，避免真实触发弹窗逻辑：

import { TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
// 替换为你自己的业务组件
import { YourComponent } from './your.component';
import { ParamGameComponent } from './param-game/param-game.component';

describe('YourComponent', () => {
  let component: YourComponent;
  // 定义dialog的spy对象，用于后续断言
  let dialogSpy: jasmine.SpyObj<MatDialog>;

  beforeEach(() => {
    // 创建带open方法的MatDialog mock实例
    const mockDialog = jasmine.createSpyObj('MatDialog', ['open']);

    TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: MatDialog, useValue: mockDialog }
      ]
    });

    component = TestBed.createComponent(YourComponent).componentInstance;
    // 拿到注入的mock dialog实例
    dialogSpy = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>;
  });

第二步：编写测试用例 #

在上述describe块中新增针对openPram方法的测试逻辑：

it('调用openPram时应正确打开ParamGameComponent弹窗', () => {
    // 触发待测试的方法
    component.openPram();

    // 断言dialog.open方法被调用1次
    expect(dialogSpy.open).toHaveBeenCalledTimes(1);
    // 断言调用时传入的第一个参数为ParamGameComponent，第二个参数为MatDialogConfig实例
    expect(dialogSpy.open).toHaveBeenCalledWith(ParamGameComponent, jasmine.any(MatDialogConfig));
    
    // 若后续你给dialogConfig新增了自定义配置，可按如下方式进一步断言：
    // const expectConfig = new MatDialogConfig();
    // expectConfig.width = '600px';
    // expectConfig.data = { id: 1 };
    // expect(dialogSpy.open).toHaveBeenCalledWith(ParamGameComponent, expectConfig);
  });
});

• 如果你使用Jest测试框架，只需把jasmine.SpyObj替换为jest.Mock，jasmine.createSpyObj替换为jest.fn构造的mock对象即可，断言逻辑基本一致。
• 不需要额外引入ParamGameComponent的其他依赖，测试过程不会真实渲染该组件，仅做参数合法性校验。

内容的提问来源于stack exchange，提问作者Mohamed Sameh Sellami