Question

我正在以下角度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，然后可以测试它是否为null（无错误）或具有值（如果有错误）。也许像这样重构：

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

如何测试从订阅引发的错误

1 个答案: