Angular 2单元测试抛出错误“订阅”不是未定义的成员

Question

I'm working on my Jasmine unit tests in my Angular 2 app.

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'
    });
});

This is throwing the error:

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

Here's my cancelService.cancel function:

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);
}

And here's my controller/component for the actual cancel call:

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);
        });
}

I have many other tests in this spec file that work great, this is the first test that I've tried to write to verify the data that gets sent to my service.

What's wrong with this implementation? If the subscribe works already when running the app, why does the unit test fail? I don't necessarily care [yet] if the service makes the call successfully, I just want to make sure that the object that the cancel function [in the cancel service] receives is as expected.

Edit (in response to the answer by user8019820):

Sorry, I should have included my two beforeEach functions:

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

如果在测试中使用服务，则必须在beforeEach()提供程序中对其进行声明，然后在beforeEach()函数中将其实例化