Получение ошибки после запуска теста Жасмин: - TypeError: this.snackBarRef.dismiss не является функцией

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

Я получаю следующую ошибку - TypeError: 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 (во время выполнения теста). Увольнение вызывает this.snackBarRef.dismiss и из-за testBed this.snackBarRef имеет значение {}, поэтому this.snackBarRef.dismiss не определено, и вызов этого параметра приводит к ошибке.

Чтобы исправить это, создайте более сложный макет snackBarRef, например, { provide: MatSnackBarRef, useValue: { dismiss: () => {} } }. В этом случае тест не будет завершен.

Также будет хорошо, чтобы шпионить за this.snackBarRef.dismiss и проверить, был ли вызван.