如何测试订阅引发的错误

Question

我正在 angular 4 中测试下面的调用函数。

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'jasmine-error-test';

  constructor(private appService: AppService) { }

  ngOnInit(): void {
    this.call();
  }

  call() {
    return this.appService.load().subscribe((res) => {
      this.title = res;
    }, (err) => {
      throw new Error('Failed');
    });
  }

}

为了测试从订阅中引发错误的部分，我正在执行以下操作。

describe('when call is called', () => {
    describe('when the service returns an error', () => {
      let app;
      beforeEach(async(() => {
        const fixture = TestBed.createComponent(AppComponent);
        app = fixture.componentInstance;
        (service.load as jasmine.Spy).and.returnValue(Observable.throw({
          status: 406,
          error: {
            message: 'Test 406 error'
          }
        }));
      }));
      it('it should throw a  matching error', async(() => {
        expect(() => { app.call(); }).toThrowError('Failed');
      }));
    });
  });

但测试失败并出现错误

Expected function to throw an Error.

如果我使用调试器窗口，它会显示抛出错误的行正在被击中，但我仍然没有让测试通过。谁能告诉我这是怎么回事。

Answer 1

有趣的问题。使用 Observables 处理错误很棘手。正如您所发现的，重新抛出错误并非易事，因为捕获此类错误的方法是在 try/catch 块中，但这不适用于异步代码。 :) 网上有很多关于这个的很好的讨论，这是我找到的一个：Error Handling in the Reactive Extensions。

我建议重构您的代码。如果发生错误，您可以像使用 this.title 一样捕获组件变量中的详细信息。也许称它为this.error，然后您可以测试它是否为空（无错误）或有一个值（以防出错）。也许像这样重构：

call() {
    return this.appService.load().subscribe((res) => {
        this.title = res;
    }, (err) => {
        this.error = err;
        // throw new Error('Failed');
    });
}

那么您的测试将如下所示：

it('it should capture any error in this.error', () => {
    // expect(() => { app.call(); }).toThrowError('Failed');
    app.call();
    expect(app.error).toEqual(/* testError */);
});

如果它对你有帮助，这里是我整理的一个堆栈闪电，以尝试关于这个问题的一些想法：How to Test an Error Thrown from a Subscribe