无法读取角度未定义的属性“getData”答案

【问题标题】：Cannot read property 'getData' of undefined in angular无法读取角度未定义的属性“getData”
【发布时间】：2018-04-16 01:07:50
【问题描述】：

你能告诉我为什么我会收到这个错误无法读取未定义的属性'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”

【问题讨论】：

标签： javascript angular unit-testing angular-test

【解决方案1】：

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

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

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

【讨论】：

【解决方案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

【讨论】：