测试 Angular 组件抛出错误失败并出现 TypeError答案

【问题标题】：Test Angular Component Throws Error Fails With TypeError测试 Angular 组件抛出错误失败并出现 TypeError
【发布时间】：2017-06-03 15:47:07
【问题描述】：

我已将CustomError 定义为

export class CustomError extends Error {
    constructor(message?: string) {
        super(message);
        Object.setPrototypeOf(this, CustomError.prototype);
    }
}

我想从一个角度组件中抛出CustomError，例如，

@Component({
    moduleId: 'module.id',
    templateUrl: 'my.component.html'
})
export class MyComponent {
    someMethod(): void {
        throw new CustomError();
    }
}

现在我想测试CustomError被抛出，所以我写了下面的测试

describe('MyComponent', () => {

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent]
        }).compileComponents();
    }));

    beforeEach(async(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
    }));

    it('throws CustomError', () => {
        expect(component.someMethod).toThrowError(CustomError);
    });
});

此测试按预期通过。但是，如果我现在将someProperty 引入MyComponent，即，

@Component({
    moduleId: 'module.id',
    templateUrl: 'my.component.html'
})
export class MyComponent {
    someProperty: string  = "Why does this break it?";

    someMethod(): void {
        console.log(this.someProperty);  // This breaks it, why?
        throw new CustomError();
    }
}

并尝试在我正在测试的函数中使用该属性（在这种情况下写入控制台），我的测试失败，因为抛出了 TypeError - 堆栈跟踪如下：

Expected function to throw AuthError, but it threw TypeError.
        at Object.<anonymous> (webpack:///src/app/auth/login/login.component.spec.ts:46:32 <- config/karma-test-shim.js:68955:33) [ProxyZone]
        at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- config/karma-test-shim.js:65355:39) [ProxyZone]
        at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:104:0 <- config/karma-test-shim.js:65071:34) [ProxyZone]
        at webpack:///~/@angular/core/@angular/core/testing.es5.js:96:0 <- config/karma-test-shim.js:20767:17 [ProxyZone]
        at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- config/karma-test-shim.js:64666:39) [ProxyZone]
        at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:76:0 <- config/karma-test-shim.js:65352:39) [ProxyZone]
        at AsyncTestZoneSpec._finishCallback (webpack:///~/@angular/core/@angular/core/testing.es5.js:91:0 <- config/karma-test-shim.js:20762:25) [<root>]
        at webpack:///~/zone.js/dist/async-test.js:38:0 <- config/karma-test-shim.js:64655:31 [<root>]
        at timer (webpack:///~/zone.js/dist/zone.js:1732:0 <- config/karma-test-shim.js:67191:29) [<root>]

为什么这会抛出 TypeError 并破坏我的测试？

【问题讨论】：

不应该是console.log(this.someProperty)吗？
@adiga 是的，这是一个错字。测试仍然失败。

标签： angular unit-testing typescript jasmine

【解决方案1】：

您丢失了上下文this。

getJasmineRequireObj().toThrowError = function(j$) {
  function toThrowError () {
    return {
      compare: function(actual) {
        var threw = false,
          pass = {pass: true},
          fail = {pass: false},
          thrown;

        if (typeof actual != 'function') {
          throw new Error('Actual is not a Function');
        }

        var errorMatcher = getMatcher.apply(null, arguments);

        try {
          actual(); // call function reference component.someMethod

我会写

expect(component.someMethod.bind(component)).toThrowError(CustomError);

【讨论】：