测试组件OnDestroy生命周期的Observable清理逻辑遇问题

我开发了一个Angular组件，该组件会调用并监听若干Observable，在销毁时通过OnDestroy生命周期钩子清理订阅（推进并关闭Observable）。但对应的测试代码无法正常运行，组件本身确实能完成Observable的清理操作，请问我的测试写法是否存在错误？

组件代码 #

export class DevicesComponent implements OnDestroy {
   public completer$: Subject<void> = new Subject<void>();

   constructor(private deviceFacade: DeviceFacade, private spinner: SpinnerService) {
       this.deviceFacade.dataLoaded$.pipe(takeUntil(this.completer$)).subscribe({
            next: (loading: boolean) => {
                if (!loading) {
                    this.spinner.show();
                } else {
                    this.spinner.hide();
                }
            },
            error: (err: string | null) => console.log(err),
        });
   }

    ngOnDestroy(): void {
        this.completer$.next();
        this.completer$.complete();
    }
}

测试代码 #

it('should call method and unsubscribe on destroy', () => {
    const destroy = spyOn(component, 'ngOnDestroy');
    const next = spyOn(component.completer$, 'next');
    const complete = spyOn(component.completer$, 'complete');

    component.ngOnDestroy();
    fixture.detectChanges();

    expect(destroy).toHaveBeenCalled();
    expect(next).toHaveBeenCalled();
    expect(complete).toHaveBeenCalled();
});

你的测试写法存在两个关键问题：

• 给ngOnDestroy打间谍会覆盖原方法逻辑：当你用spyOn(component, 'ngOnDestroy')时，Angular测试框架会替换掉原有的ngOnDestroy方法，导致手动调用时不会执行completer$.next()和completer$.complete()的核心逻辑。
• 手动调用ngOnDestroy不符合真实生命周期：组件销毁的真实场景是由Angular触发，应该用fixture.destroy()来模拟，而不是直接调用方法，后续的fixture.detectChanges()也没有意义。

修正后的测试代码如下：

it('should unsubscribe observables on destroy', () => {
    // 只监听completer$的方法，不要替换ngOnDestroy原逻辑
    const nextSpy = spyOn(component.completer$, 'next');
    const completeSpy = spyOn(component.completer$, 'complete');

    // 模拟组件销毁的真实流程
    fixture.destroy();

    expect(nextSpy).toHaveBeenCalled();
    expect(completeSpy).toHaveBeenCalled();
});

额外补充两点：

1. 原组件代码中subscribe语句直接写在类顶层是语法错误，应该放到构造函数或者ngOnInit等初始化方法中。
2. 如果要验证订阅是否真的被取消，可以增加测试：

it('should stop responding to dataLoaded$ after destroy', () => {
    const spinnerShowSpy = spyOn(component.spinner, 'show');
    // 销毁组件
    fixture.destroy();

    // 触发dataLoaded$发送新值
    component.deviceFacade.dataLoaded$.next(false);

    // 验证回调不再执行
    expect(spinnerShowSpy).not.toHaveBeenCalled();
});

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