Angular 单元测试 TypeError: this.http.get(...).pipe is not a function [英] Angular unit tests TypeError: this.http.get(...).pipe is not a function

问题描述

我正在按照此示例对服务进行单元测试(从 spring 应用程序后端获取请求)https://angular.io/guide/testing#testing-http-services

I'm following this example to make a unit test for service (get request coming from spring app backend) https://angular.io/guide/testing#testing-http-services

服务类:

@Injectable()
export class TarifService {

  constructor(private messageService: MessageService, private http: HttpClient) { }

  public getTarifs(): Observable<Tarif[]> {
    return this.http.get<Tarif[]>(tarifffsURL).pipe(
      tap(() => {}),
      catchError(this.handleError('getTarifs', []))
    );
  }
}

单元测试

describe('TarifService', () => {

  let tarifService: TarifService;
  let httpClientSpy: { get: jasmine.Spy };
  let expectedTarifs;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ToastrModule.forRoot(), HttpClientModule, HttpClientTestingModule],
      providers: [TarifService, HttpClient, MessageService]
    });

    httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
    tarifService = new TarifService(<any> MessageService,<any> httpClientSpy);

  });


  it('should be created', inject([TarifService], (service: TarifService) => {
    expect(service).toBeTruthy();
  }));


  it('should return expected tarif (HttpClient called once)', () => {
    const expectedTarifs: Tarif[] =
      [{ id: 1, name: 'Tarif1', value: '20' }, { id: 2, name: 'Tarif2', value:'30' }];

    httpClientSpy.get.and.returnValue(expectedTarifs);

    tarifService.getTarifs().subscribe(
      tarifs => expect(tarifs).toEqual(expectedTarifs, 'expected tarifs'),
      fail
    );
    expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
  });
});

运行测试时，我一直遇到这个错误

When running the tests, I keep having this error

TarifService should return expected tarif (HttpClient called once)
TypeError: this.http.get(...).pipe is not a function

这可能是什么原因?

推荐答案

问题是当你的 spy 被调用时，它返回一个 Array，并且 Array 没有 pipe 函数.你需要从你的 spy 返回一个 Observable，就像这样

The problem is that when your spy is being called, it is returning an Array, and Array does not have a pipe function. You need to return an Observable from your spy, something like this

const expectedTarifs: Tarif[] =
  [{ id: 1, name: 'Tarif1', value: '20' }, { id: 2, name: 'Tarif2', value:'30' }];

httpClientSpy.get.and.returnValue(Observable.of(expectedTarifs));

看看 returnValue 如何是 Observable.of(expectedTarifs).Observable.of 创建一个 Observable，它发出一些您指定为参数的值，一个接一个地发出，然后发出完整的通知.查看文档

See how the returnValue is Observable.of(expectedTarifs). Observable.of creates an Observable that emits some values you specify as arguments, immediately one after the other, and then emits a complete notification. See the docs

在最新版本的 rxjs 中，我们可以使用 of 运算符

In the latest versions of rxjs we can use the of operator

import { of } from 'rxjs';

//... omitting some code here for brevity 

const expectedTarifs: Tarif[] =
  [{ id: 1, name: 'Tarif1', value: '20' }, { id: 2, name: 'Tarif2', value:'30' }];

httpClientSpy.get.and.returnValue(of(expectedTarifs));

希望能帮到你

这篇关于Angular 单元测试 TypeError: this.http.get(...).pipe is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！