如何测试Angular中MatDialog的打开与关闭函数？解决spyOn调用close时的类型错误

哈哈，我一眼就看出来问题出在哪啦！你报错的核心原因是**MatDialog本身根本没有close方法**——close是MatDialogRef实例上的方法，也就是你代码里存的dialogRef变量。你之前错误地去监听dialogService（也就是MatDialog）的close方法，类型检查自然会报错😅

下面我给你一步步讲清楚怎么正确Mock并完成测试：

第一步：搞懂核心逻辑 #

你的组件逻辑是：

1. 调用dialogService.open()拿到一个MatDialogRef实例（存在dialogRef里）
2. 调用这个实例的close()方法关闭弹窗

所以测试时，我们需要：

• Mock MatDialog，让它的open()返回一个模拟的MatDialogRef
• 监听这个模拟MatDialogRef的close()方法，而不是MatDialog的

第二步：完整的测试代码示例 #

修改你的spec.ts，按照下面的方式写：

// 导入需要的依赖
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { TestComponent } from './test.component';
import { DialogComponent } from './dialog.component';

describe("TestComponent", ()=>{
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;
  // 声明模拟的DialogRef，用来监听close方法
  let mockDialogRef: jasmine.SpyObj<MatDialogRef<DialogComponent>>;

  beforeEach(async () => {
    // 创建模拟的MatDialogRef，包含close方法的spy
    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
    
    await TestBed.configureTestingModule({
      imports: [], // 如果DialogComponent是独立组件，这里可以导入它；否则在declarations里声明
      declarations: [TestComponent, DialogComponent], // 声明组件（如果不是独立组件的话）
      providers: [
        // Mock MatDialog，让它的open方法返回我们的mockDialogRef
        {
          provide: MatDialog,
          useValue: jasmine.createSpyObj('MatDialog', ['open'])
        }
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    
    // 拿到注入的MatDialog spy，指定open方法返回mockDialogRef
    const dialogServiceSpy = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>;
    dialogServiceSpy.open.and.returnValue(mockDialogRef);
    
    fixture.detectChanges();
  })

  test("should open dialog and then close it when test() is called", ()=>{
    // 调用组件的测试方法
    component.test();

    // 验证dialog的open方法是否被正确调用，参数是否符合预期
    const dialogServiceSpy = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>;
    expect(dialogServiceSpy.open).toHaveBeenCalledWith(DialogComponent, {
      disableClose: true,
      height: '150px',
      width: '400px'
    });

    // 验证dialogRef的close方法是否被调用
    expect(mockDialogRef.close).toHaveBeenCalled();
  })
})

关键细节解释 #

1. 为什么不用spyOn(component.dialogService, 'close')？
   component.dialogService是MatDialog的实例，它只有open()等方法，根本没有close()——close()属于打开弹窗后返回的MatDialogRef，所以你之前的写法完全找错了对象。

2. Mock的核心思路
   我们用jasmine.createSpyObj创建了两个模拟对象：

   • 模拟MatDialog，让它的open()返回我们控制的mockDialogRef
   • 模拟MatDialogRef，监听它的close()方法，这样就能捕获组件对close()的调用

3. 不需要真正打开弹窗
   整个测试过程都是模拟的，不会真的渲染弹窗，完全在测试环境中验证逻辑是否正确。

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