Angular单元测试MatDialog报错：open方法已被监视

问题场景 #

你在Angular项目中实现了点击按钮弹出PollComponent对话框，提交后关闭对话框并调用后续方法。单元测试时遇到Error: <spyOn> : open has already been spied upon错误，原因是beforeEach中创建的matDialogSpy（createSpyObj<MatDialog>('MatDialog', ['open'])）在多个测试用例中被重复使用。

解决方案 #

1. 每个测试用例前重置Spy调用记录 #

在beforeEach中创建Spy后，添加重置逻辑，确保每个测试用例的Spy调用记录是干净的：

let matDialogSpy: jasmine.SpyObj<MatDialog>;

beforeEach(() => {
  matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
  TestBed.configureTestingModule({
    providers: [
      { provide: MatDialog, useValue: matDialogSpy }
    ]
  });
  // 重置Spy的调用记录与状态
  matDialogSpy.open.calls.reset();
});

2. 避免全局复用同一Spy实例 #

不要在describe外层定义Spy并跨用例复用，而是在每个beforeEach里重新创建独立的Spy实例：

// 错误写法：全局定义Spy，导致多测试用例共用同一实例
// let matDialogSpy: jasmine.SpyObj<MatDialog>;

beforeEach(() => {
  // 正确写法：每个测试用例前重新创建全新Spy
  const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
  TestBed.configureTestingModule({
    providers: [
      { provide: MatDialog, useValue: matDialogSpy }
    ]
  });
});

3. 单个测试用例内自定义Spy行为 #

如果需要在特定测试用例中配置Spy的返回值，直接在该用例内覆盖Spy的行为即可：

it('should trigger callNextFunction when dialog closes with VALID status', () => {
  const dialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['afterClosed']);
  dialogRefSpy.afterClosed.and.returnValue(of({ status: 'VALID' }));
  matDialogSpy.open.and.returnValue(dialogRefSpy);

  // 执行组件逻辑，比如触发按钮点击
  component.openDialogWindow();

  expect(matDialogSpy.open).toHaveBeenCalledWith(PollComponent);
  expect(component.callNextFunction).toHaveBeenCalled();
});

核心原因 #

Jasmine的Spy实例会保留调用记录和行为配置，多个测试用例共用同一Spy时，后续用例的配置操作会触发重复监听错误。确保每个测试用例使用独立Spy实例，或在测试前重置Spy状态，就能彻底解决这个问题。

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