angular - 在Jasmine中对MatDialog进行单元测试时，无法读取未定义的 'afterClosed'属性

我从Karma Jasmine收到以下错误:TypeError: Cannot read property 'afterClosed' of undefined
我进行了真诚的搜索，但是在Stack Overflow或其他来源中找不到解决方案。

这是我在组件中打开MatDialog的方法:
(就像documented一样)

constructor(public dialog: MatDialog) {}

public openDialog(): void {
    const dialogReference: MatDialogRef<any, any> = this.dialog.open(myDialogComponent, {
        width: '1728px'
    });

    dialogReference.afterClosed().subscribe((result) => {
    });
}

这是我的单元测试配置:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [
            myRequestComponent
        ],
        imports: [
            MatDialogModule,
            ReactiveFormsModule
        ],
        providers: [
            { provide: MatDialog, useValue: {} },
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(myRequestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

这是我的单元测试:

it('openDialog() should open a dialog', () => {
    spyOn(component.dialog, 'open');

    component.openDialog();

    expect(component.dialog.open).toHaveBeenCalled();
});

我是否必须模拟MatDialog或MatDialogReference？

最佳答案

让我们逐步解决您的问题。

通过注册首先

providers: [{ provide: MatDialog, useValue: {} }],

每当需要解析MatDialog时，您的测试台就会注入(inject)一个没有任何行为的对象(例如，实例方法/成员)。

这不是真正必要的，因为您将MatDialogModule导入到测试台中，因此可以解决MatDialog的实例而不会出现问题。但是，请坚持使用您的方法。此解决方案将需要您删除该行。

通过执行以下操作，第二个:

spyOn(component.dialog, 'open')

您正在open引用的对象中为component.dialog实例方法安装代理。在这种情况下，您先前注册的空对象。

尽管对象没有这样的成员，但是 Jasmine 将在其位置动态添加代理。这就是为什么您看不到this.dialog.open is not a function之类的错误的原因。

最后，，只要与之交互，代理将记录有关这些交互的信息，并将调用重定向到原始open成员。因为没有原始实现a function with no return will be used in its place，它将最终触发accessing foo of undefined。

TL; DR;

删除{ provide: MatDialog, useValue: {} }并使用以下命令来模拟所需的MatDialogRef实例:

import { EMPTY} from 'rxjs';

it('openDialog() should open a dialog', () => {
    const openDialogSpy = spyOn(component.dialog, 'open')
        .and
        .returnValue({afterClosed: () => EMPTY});

    component.openDialog();

    expect(openDialogSpy).toHaveBeenCalled();
});

关于angular - 在Jasmine中对MatDialog进行单元测试时，无法读取未定义的 'afterClosed'属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54767811/