Angular Unit Test(w/Jest)导入并使用esm模块的服务

Question

呼气

我有一个使用Angular(v9(、Jest(24.9.0(和ECMAScript模块(dialog polyfill(v0.5.1((的单元测试问题。此polyfill增加了对HTMLDialogElement的支持。问题是，它有一个方法registerDialog，当对话框在DOM中时需要调用它。它将对话框元素作为唯一的参数。我创建的这个服务注册对话框并将其添加到数组中。实现过程中一切都很顺利，但测试失败了，因为它不知道polyfill是什么

TypeError:无法读取未定义的属性"registerDialog">

• 注意：我是Angular测试的新手，我的实现可能不正确；如果是，请告诉我
• 第二个注意事项：我确信除了在Jest测试中对文档调用createElement之外，是否还有更好的方法来创建Dialog元素

对话框服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import dialogPolyfill from 'dialog-polyfill';
@Injectable({
providedIn: 'root'
})
export class DialogService {
public dialogs$: BehaviorSubject<HTMLDialogElement[]> = new BehaviorSubject<
HTMLDialogElement[]
>([]);
private dialogs: [] = [];
constructor() {}
register(dialog: HTMLDialogElement) {
dialogPolyfill.registerDialog(dialog);
this.dialogs$.next([...this.dialogs, dialog]);
}
}

对话框服务规范

import { TestBed } from '@angular/core/testing';
import { DialogService } from './dialog.service';
describe('DialogService', () => {
let service: DialogService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(DialogService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should register a dialog', () => {
expect(service.dialogs$.getValue().length).toBe(0);
service.register(document.createElement('dialog'));
expect(service.dialogs$.getValue().length).toBe(1);
});
});

参考文献

• 对话框Polyfill
• Angular
• Jest JS

Answer 1

您需要在TestBed:中提供服务

beforeEach(() => {
TestBed.configureTestingModule({
providers: [DialogService] 
});
service = TestBed.inject(DialogService);
});