Angular 2單元測試拋出錯誤'訂閱'不是未定義的成員

Question

我正在使用Angular 2應用程序中的茉莉花單元測試。

it('cancel object passed to the cancellation service is in the expected format for a cancel contract transaction',() => { 
    var cancelReason = new models.CancelReason(); 
    cancelReason.cancelReasonCode = '165'; 
    cancelReason.cancelReasonDescription = 'Because I said so'; 

    component.subscriptionCancelReasons = []; 
    component.subscriptionCancelReasons.push(cancelReason); 

    component.cancellationsModel = new models.CancellationsModel(); 
    component.cancellationsModel.groupNumber = 'xxxxxx'; 
    component.cancellationsModel.billingUnit = 'xxxx'; 
    component.cancellationsModel.memberId = 'xxxxxxxxx'; 
    component.cancellationsModel.cancellationDate = '01/01/2020'; 
    component.cancellationsModel.cancellationReason = '165'; 

    component.cancellationsModel.cancelContract = true; 

    spyOn(cancelService, 'cancel'); 
    component.cancel(); // initiate the cancel 

    expect(cancelService.cancel).toHaveBeenCalledWith({ 
     memberKey: '000', 
     groupNumber: 'xxxxxx', 
     billingUnit: 'xxxx', 
     certificateNumber: 'xxxxxxxxx', 
     effectiveDate: '01/01/2020', 
     cancelReason: '165' 
    }); 
}); 

這是引發錯誤：

TypeError: Unable to get property 'subscribe' of undefined or null reference

這是我的cancelService.cancel功能：

cancel(cancelObject: any): any { 
    this.log('cancel', 'cancelObject: ' + JSON.stringify(cancelObject)); 

    var contractsUrl = environment.contractsServiceUrl + '/contracts/cancel'; 

    return this._http.put(contractsUrl, cancelObject) 
     .map(response => this.extractCancelResponse(response)) 
     .catch(this.handleError); 
} 

下面是針對實際取消呼叫我的控制器/組件：

private executeCancel(transactionType:string, cancelObject: any) { 
    this.log('executeCancel', 'executing the cancel transaction...'); 

    this.cancelService.cancel(cancelObject) 
     .subscribe(response => { 
      this.parseCancellationResponse(transactionType, response, cancelObject, true); 
     }, error => { 
      this.parseCancellationResponse(transactionType, error, cancelObject, false); 
     }); 
} 

我哈在這個spec文件中有許多其他測試很好用，這是我試圖編寫的第一個測試，用於驗證發送到我的服務的數據。

這個實現有什麼問題？如果訂閱在運行應用程序時已經運行，爲什麼單元測試失敗？如果服務成功完成呼叫，我不必在乎，但我只想確保[取消服務]中的取消功能所收到的對象與預期一致。

編輯（響應由user8019820答案）：

對不起，我應該包括我的兩個beforeEach功能：

let component: ContractCancellationsComponent; 
let fixture: ComponentFixture<ContractCancellationsComponent>; 
let cancelService: CancelService; 

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
      HttpModule, 
      FormsModule, 
      RouterTestingModule 
     ], 
     providers: [ 
      AppDataService, 
      ErrorService, 
      CancelService, 
      ContractsService 
     ], 
     declarations: [ 
      ContractCancellationsComponent, 
      WmHeaderComponent, 
      WmErrorListComponent, 
      WmStatusMessageComponent, 
      WmSpinnerComponent, 
      WmTimeoffsetPipe 
     ] 
    }).compileComponents(); 
})); 

beforeEach(() => { 
    fixture = TestBed.createComponent(ContractCancellationsComponent); 
    component = fixture.componentInstance; 
    cancelService = fixture.debugElement.injector.get(CancelService); 
    fixture.detectChanges(); 
}); 

Answer 1

如果在測試中使用一個服務，你必須在testBed的提供者中聲明它，然後在beforeEach()函數中實例化它