I have sample TestComp with ngOnInit and ngOnDestroy methods and ActivatedRoute subscription.

@Component({
    selector: 'test',
    template: '',
})
export class TestComp implements OnInit, OnDestroy {

    constructor (
        private route: ActivatedRoute
    ) {
    }

    ngOnInit() {
        this.subscription = this.route.data
            .subscribe(data => {
                console.log('data', data.name);
            })
        ;
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

I am getting "Cannot read property 'unsubscribe' of undefined" when I call ngOnDestroy method from spec file (or when I am running multiple tests).

My spec file:

describe('TestComp', () => {
    let p: TestComp;
  let fixture: ComponentFixture<TestComp>;

  beforeEach(async(() => {
    TestBed
    .configureTestingModule({
      declarations: [TestComp],
      imports: [RouterTestingModule],
      providers: [
        {
        provide: ActivatedRoute,
        useValue: {
          data: {
            subscribe: (fn: (value: Data) => void) => fn({
              name: 'Stepan'
            })
          }
        }
      }
        // { //Also tried this
        //   provide: ActivatedRoute,
        //   useValue: {
        //     params: Observable.of({name: 'Stepan'})
        //   }
        // }
      ]
    })
    pileComponents()
    .then(() => {
          fixture = TestBed.createComponent(TestComp);        
          fixture.detectChanges();
    })
    }));

  it('TestComp successfully initialized', () => {
    fixtureponentInstance.ngOnInit();
    expect(fixtureponentInstance).toBeDefined()
    fixtureponentInstance.ngOnDestroy();
  });
});

I am passing ActivatedRoute value based on answers here, but I am getting error. So my question is - what should I pass as ActivatedRoute to make it possible to subscribe and unsubscribe? Example Plunker.

I have sample TestComp with ngOnInit and ngOnDestroy methods and ActivatedRoute subscription.

@Component({
    selector: 'test',
    template: '',
})
export class TestComp implements OnInit, OnDestroy {

    constructor (
        private route: ActivatedRoute
    ) {
    }

    ngOnInit() {
        this.subscription = this.route.data
            .subscribe(data => {
                console.log('data', data.name);
            })
        ;
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

I am getting "Cannot read property 'unsubscribe' of undefined" when I call ngOnDestroy method from spec file (or when I am running multiple tests).

My spec file:

describe('TestComp', () => {
    let p: TestComp;
  let fixture: ComponentFixture<TestComp>;

  beforeEach(async(() => {
    TestBed
    .configureTestingModule({
      declarations: [TestComp],
      imports: [RouterTestingModule],
      providers: [
        {
        provide: ActivatedRoute,
        useValue: {
          data: {
            subscribe: (fn: (value: Data) => void) => fn({
              name: 'Stepan'
            })
          }
        }
      }
        // { //Also tried this
        //   provide: ActivatedRoute,
        //   useValue: {
        //     params: Observable.of({name: 'Stepan'})
        //   }
        // }
      ]
    })
    .pileComponents()
    .then(() => {
          fixture = TestBed.createComponent(TestComp);        
          fixture.detectChanges();
    })
    }));

  it('TestComp successfully initialized', () => {
    fixture.ponentInstance.ngOnInit();
    expect(fixture.ponentInstance).toBeDefined()
    fixture.ponentInstance.ngOnDestroy();
  });
});

I am passing ActivatedRoute value based on answers here, but I am getting error. So my question is - what should I pass as ActivatedRoute to make it possible to subscribe and unsubscribe? Example Plunker.

• javascript
• unit-testing
• angular
• karma-jasmine
• angular-routing

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Feb 10, 2017 at 7:08 styopdevstyopdev 2,66444 gold badges3737 silver badges5555 bronze badges 2

• 1 it's a good practice to put a conditional if (this.subscription) around the unsubscription. I've just tried the testcode and put a setTimeout of 500ms on the ngOnDestroy function call in your test and then the test passes. I guess it takes some time until the subscription is actually initialised. – Jacob Notte Commented Feb 10, 2017 at 7:38
• 1 @JacobNotte This worked for me! Had just to ensure that this.subscription was not undefined! – SrAxi Commented Mar 1, 2017 at 13:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Just use observer when mock your service:

{
    provide: ActivatedRoute,
    useValue: { data: Observable.of({ name: 'Stepan' }) }
}

You should import Subscription first.

import { Subscription } from 'rxjs/Subscription';