ngOnDestroy 的 Angular 单元测试答案

【问题标题】：Angular Unit Testing for ngOnDestroyngOnDestroy 的 Angular 单元测试
【发布时间】：2018-12-18 20:08:51
【问题描述】：

我正在使用 Jasmine Karma 对角度组件进行单元测试并面临以下错误

TypeError: this.subscription.unsubscribe is not a function at ScheduledNewContributionsViewComponent.ngOnDestroy (webpack:///./src/app/contributions/scheduled-new-contributions-view/scheduled-new-contributions-view.component.ts?:154:31) at callProviderLifecycles

当我为 ScheduledNewContributionsViewComponent 运行单元测试时，此错误会显示在控制台中。虽然我的测试通过了，但是控制台窗口充满了这个错误。每次测试都会继续出现。

下面是我的ts文件

 ngOnInit(): void {
     this.subscription = this.contributionService.editContribution$.subscribe(
              data => {
                this.scheduledContributionData = data;
                this.headerTitle = this.contributionService.getLabel('ACCTTAB.COMMONREQUESTS.MANAGECONTRIBUTIONS.EDIT');
}
        this.loadEditScheduledContributionData(this.scheduledContributionData);
      });

ngOnDestroy() {
    // prevent memory leak when component destroyed
    if (this.subscription) 
      this.subscription.unsubscribe();
    // if(this.deleteSubscription)
    // this.deleteSubscription.unsubscribe();
  }

对于contributeService，我创建了存根并模拟了editContribution$

 class ContributionServiceStub {

      editContribution$ = {
        subscribe: function(data) {
          return Observable.of(data);
        }
      }

【问题讨论】：

好吧，你的假 subscribe() 函数，不是返回一个订阅，而是返回一个 Observable。 editContribution$ 应该是一个可观察的：editContribution$ = Observable.of(data).
当我这样做时，它说 editContribution$ 不是函数

标签： angular unit-testing jasmine angular5 karma-jasmine

【解决方案1】：

您的存根函数不正确。当调用 subscribe 时，它会返回一个 observable，但它应该返回一个订阅。

class ContributionServiceStub {
  editContribution$ = Observable.of(data);
}

我只是将 observable 分配给 editContribution$ 属性。

【讨论】：