未捕获的错误：未捕获（承诺中）：TypeError：this.xxxService.getSomething(...).toPromise 不是函数答案

【问题标题】：Uncaught Error: Uncaught (in promise): TypeError: this.xxxService.getSomething(...).toPromise is not a function未捕获的错误：未捕获（承诺中）：TypeError：this.xxxService.getSomething(...).toPromise 不是函数
【发布时间】：2021-02-12 15:59:07
【问题描述】：

在组件中：

private xxxService: XxxService,

const xxxList = await this.xxxService.getSomething(this.someid).toPromise();

在测试文件component.spec.ts中：

import {Observable, of} from 'rxjs';
const xxxServiceStub = {
    getSomething: () => Promise.resolve([])
  };
 beforeEach((async(next) => {
    await TestBed.configureTestingModule({
      declarations: [someComponent],
      imports: [
       ....
      ],
      providers: [
        {provide: XxxService, useValue: xxxServiceStub},
      ]
    }).compileComponents();
    next();
  }));

API：

public getSomething(someid): Observable<xxxRef[]> {
    return this.httpClient
      .get<xxxRef[]>(
        ${environment.url}/api/xxx?someid=${someid},
        {
          observe: 'response'
        }
      ).pipe(
        map(response => {
          return response.body;
        })
      );
  }

界面：

export interface xxxRef {
  name: string;
  id: number;
  description?: string;
}

测试通过，但是 Karma 的控制台出现错误：

zone-evergreen.js:798 Uncaught Error: Uncaught (in promise): TypeError: this.xxxService.getSomething(...).toPromise is not a function

【问题讨论】：

标签： javascript angular testing karma-runner

【解决方案1】：

您需要从 getSomething 方法返回一个 Observable，但您返回的 Promise.resolve 不是 Observable，这就是您收到错误的原因。

把你的模拟方法改成这个

import { of } from 'rxjs';

...
const xxxServiceStub = {
    getSomething: () => of([]) // this returns observable 
};

toPromise reference

mock toPromise

【讨论】：

【解决方案2】：

如果不知道 xxxServiceStub 是什么，很难告诉你确切的问题，但很可能是因为你没有返回 Observable（它具有 .toPromise 函数

你伪造的xxxService.getSomething 需要看起来像这样才能在规范中工作：

getSomething(id: number): Observable<any> {
  return of(true);
}

另一种方法是使用间谍：

spyOn(xxxService, 'getSomething').and.callFake(() => of(true));

【讨论】：