ReferenceError: customElements не определен - PullRequest
Новая
       172

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

8 голосов
/ 19 марта 2020

Я использую @ 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 все тесты были успешно пройдены.

Ответы [ 4 ]

7 голосов
/ 21 марта 2020

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

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

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

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

2 голосов
/ 26 марта 2020

jsdom не поддерживает customElements до v16.2.0, как писал Гуэрри c P.

Чтобы запустить jest с jsdom v 16, вам нужно сделать следующее 

yarn add jest-environment-jsdom-sixteen

Тогда в вас jest.config.js добавить это 

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

это заставит jest использовать более новую реализацию. и это должно решить вашу проблему.

0 голосов
/ 26 марта 2020

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

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

В Angular мы используем Внедрение зависимостей с IO C, поэтому в этом примере я буду использовать InputMaskService для создания зависимости angular.

Pipe 

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.

Test

Вы можете создать экземпляр вашей трубы, проходящей сервисный номер 

beforeEach(() => {
  const inputMaskService = new InputMaskService();
  const pipe = new SomePipe(inputMaskService);
});
0 голосов
/ 19 марта 2020

Я помню, как наткнулся на ваш вопрос, и я наткнулся на что-то еще, связанное с ngx-bootstrap в отношении import, не работающего в Angular 9.

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

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

Попробуйте выполнить import InputMask from 'inputmask/somethingMoreSpecificHere'; или `import {thingSpecificHere} из 'inputmask';

...