Angular Unit Test (w / Jest) сервис, который импортирует и использует модуль esm;

Question

Объяснение

У меня есть вопрос о модульном тестировании с использованием Angular (v 9), Jest (24.9.0) и модуля ECMAScript (dialog-polyfill (v 0.5.1)). Этот polyfill добавляет поддержку для HTMLDialogElement. Проблема в том, что у него есть метод registerDialog, который нужно вызывать, когда диалог находится в DOM. Он принимает элемент диалога как единственный параметр. Этот сервис, который я создал, регистрирует диалог и добавляет его в массив. Все отлично работает с реализацией, но тесты не пройдены, потому что он не знает, что такое полифил. Я продолжаю получать следующую ошибку:

TypeError: Невозможно прочитать свойство 'registerDialog' из неопределенного

• Примечание: я довольно новичок в тестировании в Angular и моя реализация может быть неправильной; если это так, пожалуйста, дайте мне знать.
• Второе примечание: я уверен, что есть лучший способ создать элемент диалога, кроме вызова createElement для документа в тесте Jest.

Dialog Service

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

Dialog Service Spe c

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
• Шут JS

Answer 1

Вам необходимо предоставить свои услуги в вашей TestBed:

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