Jest-preset-angular: ReferenceError: PointerEvent is not defined

[dirkluijk]

Issue :

After upgrading to Jest 24, I get this Typescript error:

ReferenceError: PointerEvent is not defined

I use a tsconfig.spec.json (which seems to be loaded by ts-jest) which contains "lib": ["es2017", "dom"] in compilerOptions.

Expected behavior :

I expect PointerEvent to be defined, as it is part of the TypeScript dom lib.

[lonix1]

How did you solve this?
I have the same problem but with XMLHttpRequest

[wtho]

Issues like these do not depend on one single configuration value. It might be the result of several configuration options.

To help you out, more information is required. Can you post:

• versions of jest-preset-angular, ts-jest, jest and typescript
• your jest config (e. g. jest.config.js or in your package.json, might not exist)
• the location of your tsconfig.spec.json
• your tsconfigs' content

[lonix1]

@wtho I want to try solve this without wasting your time :)

Is there an up to date example somewhere of this library in action? The example in the repo was generated using ng-cli v1, and is outdated. It still has karma inside it, etc.

[wtho]

The example app was generated a while ago, but it runs on angular v7 and jest v24.

If you want a clean, pure angular test app, just create an angular app using the angular cli and add the preset as described in our README.

[lonix1]

Yeah that's what I did and I get the same troubles as the OP. I'll dive into that example and try find where I went wrong.

[ahnpnl]

I created a long ago a similar repo in my github account at https://github.com/ahnpnl/jest-angular . Basically it's the same as the example in this repo

[dirkluijk]

To help you out, more information is required.

Here you go!

node node_modules/jest/bin/jest.js --config jest.config.js

Jest config:

module.exports = {
  preset: 'jest-preset-angular',
  globals: {
    'ts-jest': {
      tsConfig: "./tsconfig.spec.json",
      stringifyContentPathRegex: "\\.html$",
      astTransformers: ['jest-preset-angular/InlineHtmlStripStylesTransformer.js']
    }
  },
  coverageDirectory: '.reports/coverage',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  verbose: true
};

setup-jest.ts:

import 'jest-preset-angular';

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "dist/edubase-frontend-components/",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "include": ["components/**/*.spec.ts"]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "types": ["jest"],
    "lib": ["es2018", "dom"]
  }
}

Versions:

node 8.9.2
jest 24.5.0
ts-jest 24.0.0
jest-preset-angular 7.0.1
typescript 3.1.6

[lonix1]

Yes my config looks the same, and I have similar problem

[wtho]

I created a simple Angular project and added jest without problems. You can check it out here:
https://github.com/wtho/jest-angular-example

A dom-type depending test was added in app.component.spec.ts.

I described the commands I ran to set it up in the README.md.

I later also modified the project configuration according to @dirkluijk's configs, and it still worked.

Versions:

node v11.12.0
jest 24.5.0
ts-jest 24.0.0
jest-preset-angular 7.0.1
typescript 3.2.4

I cannot find any obvious misconfiguration, maybe you can find something.

[lonix1]

@wtho Thank you for the very nice example. I figured out that In my case it's not working because I'm using nx. I'm not sure about the OP's problem. So the errors we get are the same but for different reasons.

[wtho]

@lonix1 I tried with a newly generated nx-workspace and an app inside and it worked flawlessly for me. Maybe you can generate a new project with nx and compare to that.

npx create-nx-workspace newworkspace
cd newworkspace
ng g application testapp
ng test testapp

For this example I always pressed <enter> in prompts to get started with defaults. Jest will also be picked as default test framework.

The tests in apps/testapp/src/app/app.component.spec.ts ran through and I also had access to DOM types.

[lonix1]

@wtho Yea it works from the terminal, but fails in vscode. There is a known problem with it, and the nx guys are now working on it. The errors are similar to those of the OP - it's probably because in the last few weeks there were a number of changes and some breaking changes in jest, the preset and core-js. So this problem was a false positive for me.

(However I'm happy you made that example project because it is more up to date than the official one... maybe you can link to it from the docs... it was VERY helpful for me at least!... thank you)

[ahnpnl]

@wtho I think maybe in our example, we create an example with normal angular cli project, an example with nx since nx is quite common ? Then update our README to point to those projects so people have a reference to those examples.

[lonix1]

nx is becoming very common, and nx example would be very useful
however note that it doesnt work with nx and vscode right now, so wait until the nx guys fix it

(you can see the problem if you open @wtho's example repo, it works from the terminal but fails in vscode's jest extenion and that orta vscode extension)

[ahnpnl]

I see often some issues about configuration and examples. Perhaps it's good that in the example of this repo we put example projects with base configuration so one can check and follow it.

[dirkluijk]

@wtho Did you also check with PointerEvent? Because other DOM API references actually do work in my setup. I have this issue in two projects, one of them uses Nx but the other doesn't. So I don't think it is Nx related.

[wtho]

See this test in the test project. If I remove one single attribute of PointerEvent, I got a diagnosticsError from ts-jest, so it worked for me.

[dirkluijk]

Is there a difference about DOM API usage in test files and in other files or does that not matter?

Because when I copy your test, it works fine in my project as well.

[wtho]

If I use it in a different .ts file and import it in the test (or in some component imported by the test) it also works fine for me.

Where do you use the types? In a .ts file which is imported by some component? Or in some component or plain ts file?

[dirkluijk]

I import an Angular module which imports several other modules, which in the end imports a component with:

@HostListener('document:pointermove', ['$event'])
pointerMove(event: PointerEvent): void {
  this.pointerMoveSubject.next(event);
}

Test suite failed to run

    ReferenceError: PointerEvent is not defined

      49 | 
      50 |   @HostListener('document:pointermove', ['$event'])
    > 51 |   pointerMove(event: PointerEvent): void {
         |                      ^
      52 |     this.pointerMoveSubject.next(event);
      53 |   }
      54 | 

      at components/eb-slider/eb-slider.component.ts:51:22

I will try to reproduce it in an example project.

[wtho]

Oh yeah, that's a different story.

If a module inside node_modules contains typescript-files that have to be transpiled, jest has to be told about it. See the Troubleshooting section in our README.md.

If you add the module's name to transformIgnorePatterns in your jest config, it should work.

It is not recommended to offer Typescript-files in a published module. I think the reason why we try to avoid transpiling everything in node_modules is performance-related, but I am not sure.

[dirkluijk]

It's not inside node_modules. ;)

Full stack trace is:

at components/eb-slider/eb-slider.component.ts:51:22
      at Object.<anonymous> (components/eb-slider/eb-slider.component.ts:9:1)
      at Object.<anonymous> (components/eb-slider/eb-slider.module.ts:4:1)
      at Object.<anonymous> (components/eb-media/eb-media.module.ts:6:1)
      at Object.<anonymous> (components/eb-content/eb-content.module.ts:9:1)
      at Object.<anonymous> (components/eb-cloze-drag/eb-cloze-drag.module.ts:5:1)
      at Object.<anonymous> (components/eb-cloze-image/eb-cloze-image.module.ts:6:1)
      at Object.<anonymous> (components/eb-match-drag-image/eb-match-drag-image.module.ts:5:1)
      at Object.<anonymous> (components/eb-match-drag-image/eb-match-drag-image.module.spec.ts:1:1)

[wtho]

Ok, I was able to reproduce your issue, will have a look at it.

[dirkluijk]

Awesome, I really appreciate your effort.

[wtho]

So it is not related to Angular. The simplest reproduction is:

export function Decorator() {
  return (...args) => {};
}

class Test {
  @Decorator()
  decoratedAndPointerEvent(event: PointerEvent) { }
}

describe('DOM PointerEvent and Decorators', () => {
  it("should not throw an error when combining a decorator with the DOM type PointerEvent", () => {
    const t = new Test()
    expect(t).toBeTruthy()
  });
})

I am really confused why this happens.

It works if I

• remove the Decorator (@HostListener) or
• replace PointerEvent in the method signature with another event like MouseEvent or
• assign the type to a placeholder type type MyPointerEvent = PointerEvent and use this instead in the method signature

It is not related to

• the HostListener event or arguments or the decorator itself. As long as there is one, it does not work
• the method's body, it can also be empty
• the usage of the type anywhere else in the file

I was going through some other Events in the DOM lib, but it always worked. The issue seems to only happen with PointerEvent and only in combination with a decorator.

I would suggest you to do the placeholder workaround. It adds only one line of code.

I cannot look further into it right now, but I am interested into figuring out what goes wrong. Anyway this is related to ts-jest and typescript. Probably https://github.com/kulshekhar/ts-jest/issues/1035 is the appropriate place to track this issue.

[dirkluijk]

Thanks again for your effort. I did not realise how weird the issue actually is when I filed this issue. Maybe it all makes sense when we discover the cause. 😄

I do agree that is has to do with either ts-jest and/or typescript (I think the first).

Thanks for the workaround. I will make use of it.

[catull]

Thanks for your valuable advise.
I added some mock to jest configuration.

[wtho]

Just for further tracking and others stumbling upon this:

• This is the issue that tracks the actual problem: https://github.com/jsdom/jsdom/issues/2527
• A workaround is described in https://github.com/kulshekhar/ts-jest/issues/1035#issuecomment-486442977