无法读取 angular 中未定义的属性 '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' of undefined

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

无法读取 angular 中未定义的属性 'getData'

Cannot read property 'getData' of undefined in angular

javascript

angular

unit-testing

angular-test

无法读取 angular 中未定义的 属性 'getData'

Cannot read property 'getData' of undefined in angular

javascript

angular

unit-testing

angular-test

无法读取 angular 中未定义的属性 'getData'