Unable to read unsubscribe from undefined: Angular2 testing

Question

I am trying to test a component that has an ngOnDestroy () method that has all calls to the unsubscribe () method. But, when testing, when I run my testing file (spec file), it gives me an error:

cannot read property 'unsubscribe' of undefined 

In my test file, I performed the following import:

 import { Subscription } from 'rxjs/Subscription'; 

so I think this should be enough to get all the methods in the Subscription, but still there is an error. In addition, I tried adding the “Subscription” to the list of “import”, “declarations” and “providers” of the test file, but still there is an error.

The following is a snippet of code:

 //component import { Component, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { NinjaService } from '../../../../ninja.service'; @Component({ selector: 'ninja-files', templateUrl: './ninja-files.component.html', styleUrls: ['./ninja-files.component.css'] }) export class ninjaFilesComponent implements OnInit, OnDestroy { showNinjaFiles: boolean = true; addFileSubscription: Subscription; constructor(private ninjaService: NinjaService) { ........ } ngOnInit() { this.addFileSubscription = this.NinjaService.AddedFile$ .subscribe((fileFormat: FileFormat) => { console.log('File being added: ' + fileFormat.fileName); } ngOnDestroy() { this.addFileSubscription.unsubscribe(); } } 

Then I have a testing file for this component as follows:

 import { Component, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { NinjaService } from '../../../../ninja.service'; import { TestBed, async, fakeAsync ,ComponentFixture, } from '@angular/core/testing'; import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; import {} from 'jasmine'; describe('Component: NinjaFiles', () => { let fixture: ComponentFixture<ninjaFilesComponent>; let component: ninjaFilesComponent; let ninjaServiceStub; beforeEach( async(() => { //stub NinjaService let ninjaServiceStub= {}; fixture = TestBed.configureTestingModule({ declarations: [ ninjaFilesComponent], }).createComponent(ninjaFilesComponent); component = fixture.componentInstance; })); it('Page Title', async(() => { let pageTitle = fixture.debugElement.query(By.css('.page-title')); expect(pageTitle).toBeTruthy(); })); it('Counting the files', () => { let fileCount= fixture.debugElement.query(By.css('.file-count')); expect(fileCount).toBeTruthy(); }); 

When I run the above test code, it gives me an error: “Unable to read the unsubscribe property from undefined” (which means that it cannot define the “addFileSubscription” subscription object that I defined in the component class.

Can someone suggest a workaround?

Answer 1

 import { Subscription } from 'rxjs/Subscription'; 

All this means that you can access the Subscription class from the ninjaFilesComponent class ninjaFilesComponent .

The problem is that addFileSubscription never initialized. To call ngOnInit , you need to call

 fixture.detectChanges(); 

In addition, other issues that I see are as follows:

• You never add a stub to suppliers

   TestBed.configureTestingModule({ providers: [ { provide: NinjaService, useValue: ninjaServiceStub } ] }) 

• You need to implement something in the stub

   let ninjaServiceStub = { AddedFile$: Observable.of(new FileFormat(...)) } 

• You are not using the service in the component correctly

   this.NinjaService.AddedFile$ // should be this.ninjaService.AddedFile$ // lowercase 

Answer 2

Adding fixture.detectChanges(); My tests resolved this problem that I encountered while running tests using the Angular 2 CLI with Material Design.

Thanks for the workaround!