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


Explination

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

TypeError: 不能读取未定义的属性’registerDialog’。

  • 注意:我对Angular的测试比较陌生,我的实现可能不正确,如果正确,请告诉我。
  • 第二点:我不知道除了调用 “Dialog Element “之外,是否还有更好的方法来创建Dialog Element。createElement 在Jest测试中的文档上。

对话服务

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

参考文献

解决方案:

你需要在你的TestBed中提供你的服务。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何创建不同物种群的排序图。

2022-9-8 12:17:36

未分类

只为对象的某些属性创建一个类型。

2022-9-8 12:17:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索