javascript - 引用错误 : customElements is not defined

Question

我正在使用 @ Angular @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 ， 表明:

ReferenceError: customElements is not defined

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

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

Answer 1

一个 quick search进入 inputmask存储库显示它使用 customElements 这是现代浏览器为了创建本地 Web 组件(没有框架)而实现的功能。
当查看 Jest documentation我们可以看到默认的testEnvironment是 jsdom ，它是在没有浏览器的情况下运行的 DOM 的实现。该库自 version 16.2.0 以来实现自定义元素而且这个版本是相当新的，还没有被玩笑( the last version of jest uses jsdom v15.1.1 )使用。
所以你只需要等待 jest 更新 jsdom 依赖，然后更新你的项目以使用最新版本的 jest。
另一种选择:您可以使用 jest-browser它在基于 puppeteer 的 headless 浏览器中运行 Jest。
05-2020 更新:
升级到(至少)使用 jsdom 16.2.0 (Source) 的 Jest 26.0.0