11

我在一个项目中使用@angular@9.0.7，@ngneat/spectator@5.3.1（与Jest），当我运行时Inputmask@5.0.3一切都在应用程序上运行，但是当我尝试运行一个测试套件时它失败了：ng serveng build@PipeInputmask

@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 未定义

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

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

4

4 回答 4

11

快速搜索inputmask存储库表明它使用现代浏览器customElements实现的功能来创建本机 Web 组件（没有框架）。

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

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

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

05-2020 更新：

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

于 2020-03-21T20:31:26.947 回答
4

正如 Guerric P 所写，jsdom 直到 v16.2.0 才支持 customElements。

要使用 jsdom v 16 运行 jest，您需要执行以下操作

yarn add jest-environment-jsdom-sixteen

然后在你jest.config.js添加这个

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

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

于 2020-03-26T19:35:51.803 回答
0

我记得偶然发现了您的问题，并且偶然发现了与ngx-bootstrapnot importworking in相关的其他内容Angular 9。

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

查看用法部分及其关于Angular 9.

尝试做import InputMask from 'inputmask/somethingMoreSpecificHere';或从'inputmask'导入{somethingSpecificHere}；

于 2020-03-19T18:29:02.970 回答
-2

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

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

在 Angular 中，我们使用IOC 的 Dependency Injection，所以对于这个例子，我将使用 InputMaskService 来创建 Angular 依赖。

管道

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);
});
于 2020-03-26T08:37:04.613 回答