javascript - Angular Unit Test (w/Jest) 一项导入和使用 esm 模块的服务；

Question

说明

我有一个使用 Angular (v 9)、Jest (24.9.0) 和 ECMAScript 模块 (dialog-polyfill (v 0.5.1)) 的单元测试问题。此填充添加了对 HTMLDialogElement 的支持。问题是，它有一个方法 registerDialog ，当对话框位于 DOM 中时需要调用该方法。它将对话框元素作为唯一的参数。我创建的该服务注册对话框并将其添加到数组中。一切都与实现完美配合，但测试失败，因为它不知道 polyfill 是什么。我不断收到以下错误:

TypeError: Cannot read property 'registerDialog' of undefined

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

对话服务

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

引用文献

• Dialog Polyfill
• Angular
• Jest JS

Answer 1

您需要在 TestBed 中提供服务:

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