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

在测试运行时中，组件实例中的属性interface PersoneModel extends mongoose.Document { nom: String, prenom: String, } interface CustomRequest<T> extends Request { body: T } router.post('/',(req: CustomRequest<PersoneModel>, res: Response) => { // req.body is now PersoneModel }为{}，因为您在TestBed（snackBarRef中声明了该属性。

您正在监视{ provide: MatSnackBarRef, useValue: {} }方法（在测试运行时中）。 Dismiss正在调用dismiss，并且由于testBed this.snackBarRef.dismiss是{}，因此this.snackBarRef是未定义的，调用它会引发错误。

要解决此问题，例如通过创建this.snackBarRef.dismiss的更复杂的模拟snackBarRef。在这种情况下，测试不会崩溃。

也可以很好地监视{ provide: MatSnackBarRef, useValue: { dismiss: () => {} } }并检查是否被呼叫。

运行茉莉花测试用例后出现错误：-TypeError：this.snackBarRef.dismiss不是函数

1 个答案: