Angular 单元测试 TypeError:this.http.get(...).pipe 不是函数

问题描述

我正在按照这个示例对服务进行单元测试(从 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 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！