angular - Får fel efter att ha kört jasmine-testfallet :- TypeError: this.snackBarRef.dismiss är inte en funktion

Jag får ett fel efter att ha kört testfallet. Nedan är min ts-fil.

    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();
        }
    }

Jag får följande fel - TypeError: this.snackBarRef.dismiss är inte en funktion

Jag har spionerat på funktionen som nedan -

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();
});
});

Jag behöver lösningen för att åtgärda detta fel.

Svar #1

I testkörning är attributet snackBarRef i komponentinstansen {} eftersom du deklarerade det i TestBed ({ provide: MatSnackBarRef, useValue: {} }.

Du spionerar på dismiss-metoden (i testruntime). Dismiss anropar this.snackBarRef.dismiss och på grund av testBed är this.snackBarRef {} så this.snackBarRef.dismiss är undefined, och att anropa den ger fel.

För att åtgärda det, skapa en mer komplex mock av snackBarRef genom t.ex. { provide: MatSnackBarRef, useValue: { dismiss:() => {} } }. I det fallet kommer testet inte att krascha.

Det kommer också att vara bra att spionera på this.snackBarRef.dismiss och kontrollera om det kallades.

Relaterade artiklar