无法读取角度为undefined的属性'getData'

Question

你能否告诉我为什么我收到此错误无法读取未定义的属性'getData' 我试图测试我的服务，当我尝试运行我的测试它给我上面的错误 这是我的代码 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);
    });

  })
})

尝试更多后我得到无法读取未定义的属性'getData'

Answer 1

为什么使用嵌套的beforeEach()和compileComponents()？您的beforeEach()语句应如下所示：

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

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

Answer 2

试试这个：

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

  })
})

现场演示：

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