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

【问题标题】：Angular unit tests TypeError: this.http.get(...).pipe is not a functionAngular 单元测试 TypeError：this.http.get(...).pipe 不是函数
【发布时间】：2018-11-29 14:31:20
【问题描述】：

我正在按照这个示例对服务进行单元测试（获取来自 Spring 应用后端的请求）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');
  });
});

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

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

这可能是什么原因？

【问题讨论】：

标签： angular unit-testing typescript jasmine rxjs

【解决方案1】：

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

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 the docs

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

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

希望对你有帮助

【讨论】：

【解决方案2】：

我必须这样做才能让我的工作：

import { from } from 'rxjs';

然后：

return from([expectedTarifs]);

【讨论】：