Angular单元测试：如何调用ngOnDestroy中的三个EventEmitter？

问题分析 #

你需要测试组件ngOnDestroy方法是否正确调用了openDialog、openPdf、getPath三个EventEmitter的unsubscribe方法。之前的尝试未命中核心——无需替换EventEmitter实例，直接监视原有实例的unsubscribe方法，再触发销毁逻辑即可验证。

正确实现步骤 #

• 准备组件实例：通过TestBed.createComponent创建并获取组件实例。
• 监视目标方法：用spyOn分别监视三个EventEmitter的unsubscribe方法。
• 触发销毁逻辑：直接调用component.ngOnDestroy()，或通过fixture.destroy()让框架自动触发销毁。
• 断言方法调用：验证每个unsubscribe方法都被调用过一次。

完整测试代码示例 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component.component'; // 替换为你的组件路径
import { EventEmitter } from '@angular/core';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ YourComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 监视三个EventEmitter的unsubscribe方法
    spyOn(component.openDialog, 'unsubscribe');
    spyOn(component.openPdf, 'unsubscribe');
    spyOn(component.getPath, 'unsubscribe');
    fixture.detectChanges();
  });

  it('should call unsubscribe on all EventEmitters in ngOnDestroy', () => {
    // 触发组件销毁逻辑
    component.ngOnDestroy();
    // 断言每个unsubscribe方法都被调用
    expect(component.openDialog.unsubscribe).toHaveBeenCalled();
    expect(component.openPdf.unsubscribe).toHaveBeenCalled();
    expect(component.getPath.unsubscribe).toHaveBeenCalled();
  });
});

额外说明 #

• 若想模拟Angular框架自动销毁组件的场景，可将component.ngOnDestroy()替换为fixture.destroy()，效果一致。
• 无需替换组件原有的EventEmitter实例，组件初始化时已创建这些实例，直接监视其方法即可。

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