ReferenceError: customElements is not defined

dev_054 :

I'm using @[email protected], @ngneat/[email protected] (with Jest), [email protected] in a project and everything works on application when I run ng serve or even ng build, but it fails when I try to run a test suite for a @Pipe that uses 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');
  });
});

When I run ng test, it shows:

ReferenceError: customElements is not defined

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

PS: This error just appears for Angular 9, in Angular 8 all tests were successfully passed.

Guerric P :

A quick search into inputmask repository shows that it uses customElements which is a feature implemented by modern browsers in order to create native web components (without a framework).

When looking at Jest documentation we can see that the default testEnvironment is jsdom, which is an implementation of the DOM that runs without a browser. This library implements custom elements since version 16.2.0 and this version is pretty recent, and is not yet used by jest (the last version of jest uses jsdom v15.1.1).

So you just have to wait for jest to update the jsdom dependency, and then update your project to use the latest version of jest.

Another option: you can use jest-browser which runs Jest in a headless browser based on puppeteer.