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

Question

说明

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

TypeError: 无法读取未定义的属性“registerDialog”

• 注意：我对 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);
});