ReferenceError: customElements is not defined

user_6847234 0
Viewed 5342

I'm using @angular@9.0.7, @ngneat/spectator@5.3.1 (with Jest), Inputmask@5.0.3 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.

angular-spectator angular-test input-mask angular javascript
4 Answers

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)

user_37381710

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.

user_712450

I remember stumbling upon your question and I stumbled upon something else related to ngx-bootstrap with regards to an import not working in Angular 9.

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

Check out the usage section and its warning about Angular 9.

Try doing import InputMask from 'inputmask/somethingMoreSpecificHere'; or `import { somethingSpecificHere } from 'inputmask';

user_73654610

The problem is that you are not injecting the Inputmask dependency into your test.

This is because you are using a javascript import. There are Angular libraries to do this (ngx-mask).

In Angular we use Dependency Injection with IOC, so for this example I'll use an InputMaskService to create the angular dependency.

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',
    });
  }
}

Note that I'm injecting the service in the constructor and using that instance in the transform method.

Test

You can create an instance of your pipe passing the service reference

beforeEach(() => {
  const inputMaskService = new InputMaskService();
  const pipe = new SomePipe(inputMaskService);
});
user_19746810
Related