我正在使用 @ 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 中所有测试都成功通过了。
最佳答案
一个 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
关于javascript - 引用错误 : customElements is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60761140/