参考错误：customElements 未定义

Question

我使用@ @角度9.0.7，@ngneat/spectator@5.3.1（用玩笑），Inputmask@5.0.3在一个项目中，一切工作的应用程序时，我跑ng serve，甚至ng build，但是当我尝试运行测试套件的失败@Pipe使用Inputmask：

@Pipe：

import { Pipe, PipeTransform } from '@angular/core';

import Inputmask from 'inputmask';

@Pipe({
  name: 'appSomePipe',
})
export class SomePipe implements PipeTransform {
  transform(value: string): string {
    return Inputmask.format(value, {
      jitMasking: true,
      mask: '1111-1',
    });
  }
}

@Spec：

import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator/jest';

import { SomePipe } from './some.pipe';

describe('SomePipe', () => {
  let spectator: SpectatorPipe<SomePipe>;
  const createPipe = createPipeFactory(SomePipe);

  it('test', () => {
    spectator = createPipe(`{{ '11111' | appSome }}`);
    expect(spectator.element).toHaveText('1111-1');
  });
});

当我运行时ng test，它显示：

参考错误：customElements 未定义

  2 | 
> 3 | import Inputmask from 'inputmask';

PS：这个错误只出现在 Angular 9 中，在 Angular 8 中所有测试都成功通过。

Answer 1

一个快速搜索到inputmask库显示，它使用customElements它是由现代浏览器，以创建本地Web组件实现了一个功能（没有框架）。

查看Jest 文档时，我们可以看到默认值testEnvironment是jsdom，它是 DOM 的一种实现，无需浏览器即可运行。这个库实现了自16.2.0版本以来的自定义元素，这个版本是最新的，尚未被 jest 使用（ jest的最后一个版本使用 jsdom v15.1.1）。

所以你只需要等待 jest 更新 jsdom 依赖，然后更新你的项目以使用最新版本的 jest。

另一种选择：您可以使用jest-browser，它在基于 puppeteer 的无头浏览器中运行 Jest。

2020 年 5 月更新：

升级到（至少）使用 jsdom 16.2.0 的 Jest 26.0.0（来源）