CODEWITHSUNDEEP
javascriptangularunit-testingangular-test
naveen
naveen

Reputation: 937

Cannot read property 'getData' of undefined in angular

could you please tell me why I am getting this error Cannot read property 'getData' of undefined I am trying to test my service when I try to run my test it gives me above error here is my code https://stackblitz.com/edit/angular-testing-w9towo?file=app%2Fapp.service.spec.ts

     import { TestBed, ComponentFixture, async, inject } from '@angular/core/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {Posts} from './post.interface';

import { AppService } from './app.service';

describe('AppService', () => {
  let service:AppService,
  httpMock:HttpTestingController;
  beforeEach(() => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
        providers: [AppService]

      }).compileComponents();
      service =TestBed.get(AppService);
      httpMock =TestBed.get(HttpTestingController);

    }));

    afterEach(()=>{
     httpMock.verify();
    })
  })


  describe('Service is truty', () => {
       it('should return an Observable<User[]>', () => {
      const dummyUsers :Posts[]= [{
        userId: 10,
        id: 10,
        title: 'post',
        body: 'post'
      }];

      service.getData().subscribe(users => {
        console.log(users)
        expect(users.length).toBe(1);
        expect(users).toEqual(dummyUsers);
      });

      const req= httpMock.expectOne('https://jsonplaceholder.typicode.com/posts')
          expect(req.method).toBe('GET');
  req.flush(dummyUsers);
    });

  })
})

After trying more I am getting Cannot read property 'getData' of undefined

enter image description here

Upvotes: 0

Views: 1176

Answers (2)

HDJEMAI
HDJEMAI

Reputation: 9800

Try this:

import { TestBed, ComponentFixture, async, inject } from '@angular/core/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {Posts} from './post.interface';
import {HttpModule} from '@angular/http';

import { AppService } from './app.service';

describe('AppService', () => {
  let service:AppService,
  httpMock:HttpTestingController;
  let fixture;


    beforeEach(async(() => {
      TestBed.configureTestingModule({
      imports: [HttpClientTestingModule,
      HttpModule],
        providers: [
          AppService
        ]

      }).compileComponents().then( () => {
        service = TestBed.get(AppService);
        httpMock =TestBed.get(HttpTestingController);
      })

    }));

    afterEach(()=>{
      httpMock.verify();
    })

  describe('Service is truty', () => {
      it('should return an Observable<User[]>', () => {
      const dummyUsers :Posts[]= [{
        userId: 10,
        id: 10,
        title: 'post',
        body: 'post'
      }];

      service.getData().subscribe(users => {
      console.log(users)
        expect(users.length).toBe(1);
        expect(users).toEqual(dummyUsers);
      });

      const req= httpMock.expectOne('https://jsonplaceholder.typicode.com/posts')
          //expect(req.method).toBe('GET');
  req.flush(dummyUsers);
    });

  })
})

Live Demo:

https://stackblitz.com/edit/angular-testing-oqrffm?file=app%2Fapp.service.spec.ts

Upvotes: 0

Yakov Fain
Yakov Fain

Reputation: 12376

Why do you use nested beforeEach() and compileComponents()? Your beforeEach() statement should look like this:

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [AppService]
    });

    service = TestBed.get(AppService);
    httpMock = TestBed.get(HttpTestingController);
  });

Upvotes: 1

Related Questions