管道

Question

我在项目中使用 @ angular @ 9.0.7 ，@ngneat/spectator@5.3.1（带有 Jest ），Inputmask@5.0.3，并且一切正常运行ng serve甚至什至ng build的应用程序，但是当我尝试为使用@Pipe的{{1}}运行测试套件时，它失败：

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'); }); });时，它显示：

ReferenceError：未定义customElements

ng test

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在基于木偶的无头浏览器中运行Jest。

更新05-2020：

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

Answer 2

正如Guerric P所写，jsdom在v16.2.0之前不支持customElements。

要使jsdom v 16运行起来很有趣，您需要执行以下操作

yarn add jest-environment-jsdom-sixteen

然后在您的jest.config.js中添加

module.exports = {
  testEnvironment: 'jest-environment-jsdom-sixteen',
  ...
}

这将迫使Jest使用较新的实现。这应该可以解决您的问题。

Answer 3

我记得遇到了您的问题，并且偶然发现了与ngx-bootstrap有关的其他问题，涉及到import在Angular 9中不起作用。

https://valor-software.com/ngx-bootstrap/#/datepicker

查看用法部分及其有关Angular 9的警告。

尝试从“ inputmask”执行import InputMask from 'inputmask/somethingMoreSpecificHere';或`import {somethingSpecificHere}；

Answer 4

问题在于您没有将Inputmask依赖项注入到测试中。

这是因为您正在使用JavaScript导入。有Angular库可以做到这一点（ngx-mask）。

在Angular中，我们使用Dependency Injection with IOC，因此在此示例中，我将使用InputMaskService创建角度依赖性。

管道

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

import { InputMaskService } from './inputmask.service';

@Pipe({
  name: 'appSomePipe',
})
export class SomePipe implements PipeTransform {

  constructor(private inputMaskService: InputMaskService){}

  transform(value: string): string {
    return this.inputMaskService.format(value, {
      jitMasking: true,
      mask: '1111-1',
    });
  }
}

请注意，我正在将服务注入构造函数中，并在transform方法中使用该实例。

测试

您可以创建传递服务引用的管道实例

beforeEach(() => {
  const inputMaskService = new InputMaskService();
  const pipe = new SomePipe(inputMaskService);
});

ReferenceError：未定义customElements

4 个答案:

管道

测试