Getting error after running the jasmine test case :- TypeError: this.snackBarRef.dismiss is not a function

Question

我在运行测试用例之后遇到错误。下面是我的 ts 文件。

    import { Component, OnInit, Inject} from '@angular/core';
    import { MAT_SNACK_BAR_DATA } from '@angular/material';
    import { MatSnackBarRef } from '@angular/material';

    @Component({
        selector: 'Message',
        templateUrl: './Message.component.html',
        styleUrls: ['./Message.component.scss'],
    })
    export class MessageComponent implements OnInit {
        constructor(
            @Inject(MAT_SNACK_BAR_DATA) public data: any,
            public snackBarRef: MatSnackBarRef<MessageComponent>
        ) {}

        ngOnInit() {}

        dismiss(): void {
            this.snackBarRef.dismiss();
        }
    }

我收到以下错误 - 类型错误：this.snackBarRef.dismiss 不是函数

我窥探了如下函数 -

describe('MessageComponent', () => {
let component: MessageComponent;
let fixture;

beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [{ provide: MAT_SNACK_BAR_DATA, useValue: {} }, { provide: MatSnackBarRef, useValue: {} }],
        declarations: [MessageComponent],
    });

    fixture = TestBed.createComponent(MessageComponent);
    component = fixture.componentInstance;
    spyOn(component, 'dismiss').and.callThrough();
});
it('should call dismiss function', () => {
    component.dismiss();
    expect(component.dismiss).toHaveBeenCalled();
});
});

我需要修复此错误的解决方案。

Answer 1

在组件实例中的测试运行时属性 snackBarRef 是 {} 因为您在 TestBed 中声明了它 ({ provide: MatSnackBarRef, useValue: {} }.

您正在监视 dismiss 方法（在测试运行时）。 Dismiss 正在调用 this.snackBarRef.dismiss 并且因为 testBed this.snackBarRef 是 {} 所以 this.snackBarRef.dismiss 是未定义的，调用它会抛出错误。

要解决此问题，请创建更复杂的 snackBarRef 模拟，例如{ provide: MatSnackBarRef, useValue: { dismiss: () => {} } }。在那种情况下测试不会崩溃。

监视 this.snackBarRef.dismiss 并检查是否被调用也很好。

Getting error after running the jasmine test case :- TypeError: this.snackBarRef.dismiss is not a function

Getting error after running the jasmine test case :- TypeError: this.snackBarRef.dismiss is not a function

typescript

istanbul

karma-jasmine

angular