如何在 Angular2 测试中模拟 Observable.throw？答案

【问题标题】：How can I mock an Observable.throw in an Angular2 test?如何在 Angular2 测试中模拟 Observable.throw？
【发布时间】：2017-04-19 13:56:19
【问题描述】：

我想测试我的 Angular2 组件中的错误处理，因此想模拟一个服务以返回一个 Observable.throw('error')。如何使用 Jasmine 和 Karma 以及 Angular 2 来完成？

【问题讨论】：

您能给我们提供一个代码示例吗？为您的问题添加上下文，以便我们提供准确的答案。

标签： angular jasmine karma-runner

【解决方案1】：

这是我使用 Rxjs 6 的解决方案

let mockService = {
  getData: () => {
    return of({data:'any data'});
  }
}

spyOn(mockService , 'getData').and.callFake(() => {
  return throwError(new Error('Fake error'));
});

【讨论】：

太棒了，正是我需要的！谢谢！
这可以更短let mockService = { getData: of({data:'any data'})}; spyOn(mockService , 'getData').and.returnValue(throwError(ERROR_RESPONSE))

【解决方案2】：

您可以简单地模拟 Observable 并使用 Observable.throw({status: 404}) 抛出错误对象并测试 observable 的错误块。

const xService = fixture.debugElement.injector.get(SomeService);
const mockCall = spyOn(xService, 'xMethod')
                       .and.returnValue(Observable.throw({status: 404}));

在这里，我通过在我的测试中模拟 xMethod 的 xSerive 来从 Observable.throw({status: 404}) 抛出 http 404 错误。

【讨论】：

在 Rxjs 6+ 中，Observable.throw 更改为静态运算符 throwError。
在 RxJs 6+ 中，您不必导入整个 observable，只需使用 throw()

【解决方案3】：

你应该 create 一个 observable，只需调用观察者 error。例如

let mockService = {
  error: false,
  data: 'something',
  getData: () => {
    return Observable.create(observer => {
      if (this.error) {
        observer.error(new Error(..))
      } else {
        observer.next(this.data);
      }
      observer.complete();
    })
  }
}

现在，对于您的测试，您可以将模拟用于成功案例和错误案例。对于错误情况，只需将 error 属性设置为 true。在成功的情况下，使用数据调用next。

订阅 observable 时，可以传递三个回调，success、error 和 complete

service.getData().subscribe(
  (data) => {}   // sucess
  (error) => {}  // error
  () => {}       // complete
)

所以有了observer，当调用observer.next、observer.error、observer.complete时，会调用对应的回调。

【讨论】：

我遇到了一些麻烦。是在测试声明中，即“它”，我将属性设置为“真”吗？当我将属性设置为“true”时，在我设置它的测试声明中没有选择更改。如果这有帮助，我可以将我的代码放在 plnkr 中。