如何在单元测试中覆盖Angular组件私有Subscription的空值分支？

问题场景 #

维护旧Angular代码时，需要为以下组件编写单元测试：

export class SomeServiceComponent implements OnDestroy {
 
  private someSubscription!: Subscription;
 
  constructor(public someService: SomeService) {
    this.someSubscription = this.someService.getSub$('data').subscribe(
      response => {
        // 业务逻辑
      }
    )
  }
 
  ngOnDestroy(): void {
    this.someSubscription?.unsubscribe();
  }
}

原代码运行正常，但单元测试无法覆盖ngOnDestroy中someSubscription为undefined的分支——因为someSubscription用了TypeScript非空断言!，直接在测试中赋值null/undefined会触发类型不兼容错误，且无法修改原代码。

解决方案 #

利用TypeScript类型检查仅作用于编译阶段的特性，通过类型断言绕开约束，直接修改私有属性以覆盖空值分支，具体步骤如下：

1. 基础测试：验证空值分支无报错 #

在测试中，通过any类型断言访问组件的私有属性someSubscription，将其设置为undefined，然后调用ngOnDestroy并验证不会抛出错误：

it('should handle undefined someSubscription safely in ngOnDestroy', () => {
  const component = fixture.componentInstance;
  // 绕开类型检查，将私有属性设为undefined
  (component as any).someSubscription = undefined;
  // 调用ngOnDestroy，验证无异常抛出
  expect(() => component.ngOnDestroy()).not.toThrow();
});

2. 进阶测试：验证空值时不执行unsubscribe #

如果需要明确验证空值场景下unsubscribe未被调用，可以结合Spy工具实现：

it('should not call unsubscribe when someSubscription is undefined', () => {
  const component = fixture.componentInstance;
  // 创建mock订阅实例并监听unsubscribe方法
  const mockSubscription = jasmine.createSpyObj('Subscription', ['unsubscribe']);
  
  // 先赋值正常实例，再替换为undefined
  (component as any).someSubscription = mockSubscription;
  (component as any).someSubscription = undefined;
  
  component.ngOnDestroy();
  // 验证unsubscribe从未被调用
  expect(mockSubscription.unsubscribe).not.toHaveBeenCalled();
});

原理说明 #

TypeScript的非空断言!和类型约束仅在编译阶段生效，运行时的JavaScript并不限制属性的类型或值。通过(component as any)断言可以直接访问并修改私有属性，从而模拟someSubscription为undefined的场景，覆盖可选链分支。

内容的提问来源于stack exchange，提问作者500 - Internal Server Error