Angular 2 unit test throwing error 'subscribe' is not a member of undefined

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

J-R Choiniere J-R Choiniere · Accepted Answer · 2017-07-28T13:58:39

If you use a service in a test, you have to declare it in providers of the testBed and then instantiate it in beforeEach() function

Angular 2 unit test throwing error 'subscribe' is not a member of undefined

1 Answers