title: Cannot read property of undefined 'ngOnInit' 'getData'-Angular-Unit testing-jasmine
body: <p>I'm trying of write a unit test for my component file which is subscribing to a method in service layer</p>
  
  <p>Homecomponent.ts</p>
  
  <pre><code>import { Data } from './../model/data.model';
  import { DataService } from './../services/data.service';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
  })
  export class HomeComponent implements OnInit {
    data: Data[];
    constructor(private service: DataService) {}
  
    ngOnInit() {
      this.getData();
    }
    getData() {
      this.service.getData().subscribe(
        (data) =&gt; {
          console.log(data);
          this.data = data;
        },
        (err) =&gt; {
          console.log(err);
        },
      );
    }
  }
  </code></pre>
  
  <p>HomeComponent.spec.ts</p>
  
  <pre><code>import { Data } from './../model/data.model';
  import { HttpClientModule } from '@angular/common/http';
  import { HomeComponent } from './home.component';
  import { ComponentFixture, async, TestBed } from '@angular/core/testing';
  import { DataService } from '../services/data.service';
  import { Observable } from 'rxjs';
  import 'rxjs/add/observable/of';
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { results } from '../model/home';
  
  class MockMyService {
    public data: Data[];
    public getData(): Observable&lt;Data[]&gt; {
      this.data = results;
      return Observable.of(this.data);
    }
  }
  
  describe('HomeComponent', () =&gt; {
    let component: HomeComponent;
    let fixture: ComponentFixture&lt;HomeComponent&gt;;
    let mockSomeService: MockMyService;
    describe('Async', () =&gt; {
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          declarations: [HomeComponent],
          providers: [
            {
              provide: DataService,
              useValue: mockSomeService,
            },
          ],
          imports: [HttpClientModule],
          schemas: [CUSTOM_ELEMENTS_SCHEMA],
        });
        TestBed.compileComponents();
        fixture = TestBed.createComponent(HomeComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        mockSomeService = fixture.debugElement.injector.get(DataService);
        spyOn(mockSomeService, 'getData').and.returnValue(Observable.of(results));
        component.ngOnInit();
        fixture.detectChanges();
      }));
    });
  
    // afterEach(() =&gt; {
    //   fixture = undefined;
    // });
  
    it('method should be called', async () =&gt; {
      component.ngOnInit();
      mockSomeService.getData();
      expect(fixture.debugElement.componentInstance.data.length).toEqual(2);
    });
  });
  </code></pre>
  
  <p>if I use 
   component.ngOnInit();
  it is giving error as</p>
  
  <pre><code>TypeError: Cannot read property 'ngOnInit' of undefined
  </code></pre>
  
  <p>if I'm not using component.ngOnInit()
  it is giving me error as</p>
  
  <pre><code>TypeError: Cannot read property 'getData' of undefined
  </code></pre>
  
  <p>How can I overcome this problem?
  Thanks in advance.</p>