ReferenceError: customElements не определен

Question

Я использую @ angular @9.0.7, @ngneat/spectator@5.3.1(с Jest), 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 не определен

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

PS: Эта ошибка появляется только для Angular 9, в Angular 8 все тесты были успешно пройдены.

Answer 1

Быстрый поиск вinputmask репозиторий показывает, что он использует customElements это функция, реализованная современными браузерами для создания собственных веб-компонентов (без фреймворка).

При просмотре документации Jest мы видим, что по умолчаниюtestEnvironmentэто jsdom, который представляет собой реализацию DOM, работающую без браузера. Эта библиотека реализует пользовательские элементы, начиная с версии 16.2.0, и эта версия довольно недавняя и еще не используется jest (последняя версия jest использует jsdom v15.1.1).

Итак, вам просто нужно дождаться, пока jest обновит зависимость jsdom, а затем обновить свой проект, чтобы использовать последнюю версию jest.

Другой вариант: вы можете использовать jest-browser, который запускает Jest в безголовом браузере на основе кукольника.

Обновление 05-2020:

Обновитесь до (как минимум) Jest 26.0.0, который использует jsdom 16.2.0 (исходный код)

Answer 2

Jsdom не поддерживает customElements до v16.2.0, как писал Геррик П.

Чтобы запустить шутку с 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/

Ознакомьтесь с разделом использования и предупреждением о Angular 9.

Попробуйте сделать import InputMask from 'inputmask/somethingMoreSpecificHere'; или ʻimport { somethingSpecificHere } из 'inputmask';

Answer 4

Проблема в том, что вы не вводите зависимость Inputmask в свой тест.

Это потому, что вы используете импорт javascript. Для этого существуют библиотеки Angular (ngx-mask).

В Angular мы используем Dependency Injection с 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);
});