ReferenceError: customElements is not defined

Question

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.

Answer 1

jsdom does not support customElements until v16.2.0 as Guerric P wrote.

To get jest running with jsdom v 16 you need to do the following

yarn add jest-environment-jsdom-sixteen

Then in you jest.config.js add this

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

this will force jest to use a newer implementation. and this should solve your problem.

Answer 2

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.

Update 05-2020:

Upgrade to (at least) Jest 26.0.0 which uses jsdom 16.2.0 (Source)