Nx: DOM test issues after upgrading to 7.7.1

[matheo]

Expected Behavior

Run my tests normally as I'm doing with Nx 7.6.2

Current Behavior

Tests are broken with the error ReferenceError: DragEvent is not defined
I've tried different things with the tsconfig.json including the dom lib but I had errors related to es6 and Array.include used in other parts of the project.

Failure Information

 FAIL  apps/client/src/app/dashboard/surveyors/list/list.component.spec.ts
  ● Test suite failed to run

    ReferenceError: DragEvent is not defined

      71 | 
      72 |   @HostListener('dragover', ['$event'])
    > 73 |   onDragOver(event: DragEvent) {
         |                              ^
      74 |     event.stopPropagation();
      75 |     event.preventDefault();
      76 |     this.active = true;

      at ../../libs/shared/src/lib/directives/drop-zone.directive.ts:73:30
      at Object.<anonymous> (../../libs/shared/src/lib/directives/drop-zone.directive.ts:116:2)
      at Object.<anonymous> (../../libs/shared/src/lib/directives/directives.module.ts:13:5)
      at Object.<anonymous> (../../libs/shared/src/lib/directives/index.ts:8:1)
      at Object.<anonymous> (../../libs/shared/src/lib/shared.module.ts:11:5)
      at Object.<anonymous> (../../libs/shared/src/index.ts:7:1)
      at Object.<anonymous> (src/app/dashboard/list/list.component.spec.ts:4:1)

Steps to Reproduce

1. Have a directive or component using the DragEvent
2. Run ng update @nrwl/nx @nrwl/schematics to update to 7.7.1 and jest 24.1.0
3. Run the tests where the directive/component is included

Context

• version of Nx used: 7.7.1
• version of Angular CLI used: 7.3.1
• version of Angular DevKit used: 7.3.1

Failure Logs

My diff from the working state, to the broken version, is:

diff --git a/angular.json b/angular.json
index dbd18d9..efb68be 100644
--- a/angular.json
+++ b/angular.json
@@ -338,7 +336,8 @@
       "style": "scss"
     },
     "@nrwl/schematics:library": {
-      "style": "scss"
+      "style": "scss",
+      "framework": "angular"
     }
   },
   "defaultProject": "client"
diff --git a/jest.config.js b/jest.config.js
index 5a01821..e66c395 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,11 +1,9 @@
 module.exports = {
   testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
   transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js'
+    '^.+\\.(ts|js|html)$': 'ts-jest'
   },
-  transformIgnorePatterns: [
-    "node_modules/(?!@ngrx)"
-  ],
+  transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
   resolver: '@nrwl/builders/plugins/jest/resolver',
   moduleFileExtensions: ['ts', 'js', 'html'],
   collectCoverage: true,
diff --git a/package.json b/package.json
index 5b19739..4d4ae16 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@ngrx/router-store": "^7.3.0",
     "@ngrx/store": "^7.3.0",
     "@ngx-pwa/local-storage": "^7.4.1",
-    "@nrwl/nx": "7.6.2",
+    "@nrwl/nx": "7.7.1",
     "auth0-js": "^9.10.0",
     "axios": "^0.18.0",
     "core-js": "^2.5.4",
@@ -67,12 +67,12 @@
     "@angular/language-service": "^7.2.9",
     "@ngrx/schematics": "^7.3.0",
     "@ngrx/store-devtools": "^7.3.0",
-    "@nrwl/builders": "7.6.2",
-    "@nrwl/schematics": "7.6.2",
+    "@nrwl/builders": "7.7.1",
+    "@nrwl/schematics": "7.7.1",
     "@types/auth0-js": "^8.11.11",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
-    "@types/jest": "^23.0.0",
+    "@types/jest": "24.0.9",
     "@types/jquery": "3.3.6",
     "@types/lodash": "^4.14.120",
     "@types/node": "~8.9.4",
@@ -82,8 +82,8 @@
     "jasmine-core": "~2.99.1",
     "jasmine-marbles": "0.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "jest": "^23.0.0",
-    "jest-preset-angular": "6.0.2",
+    "jest": "24.1.0",
+    "jest-preset-angular": "7.0.0",
     "karma": "~3.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",

Thanks!

[tavianm]

Same problem, any workaround?

[lonix1]

Hey guys there are many issues lately which seem unrelated but they are - nx isn't playing nice with jest-preset-angular and so tests don't work.

Can someone share a working config: jest.config.js and tsconfig.spec.json, etc.?

[vsavkin]

@matheo could you create a repository with a repro?

[matheo]

Hi @vsavkin! sorry about the delay
I got pretty busy with another project and now that I came back to this one, and still got this issue, I saw your comment, my apologies!

I've used the latest @nrwl/workspace 8.0.1 to create this repo with the problematic directive:
https://github.com/matheo/dom-issues

The issue is there:

P/S: Thank you very much for your work!
I'm an admirer of Nrwl and the cool stuff that you build

[vsavkin]

It looks like it only fails when the info is used in a decorator:

So the following fails:

@Component({
  selector: 'nx802-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Input() e: DragEvent;
}

And the following works:

@Component({
  selector: 'nx802-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  e: DragEvent;
}

so it's probably an issue with jest-present-angular.

@FrozenPandaz can you think of why this might be?

[FrozenPandaz]

Thanks for the repro!

There's a related ts-jest issue here: https://github.com/kulshekhar/ts-jest/issues/1035

Solutions

1. Polyfill it in the setup file:

import 'jest-preset-angular';

Object.defineProperty(window, 'DragEvent', {
  value: class DragEvent {}
});

1. Set emitDecoratorMetadata to false in tsconfig.spec.json
   a. I'm not 100% sure about this option in tsconfig. As far as I know... Angular projects always have this option set to true.

I would go with Option 1 as one day jsdom may provide DragEvent however, a similar issue might come up for other DOM events.

Hopefully this solves your problem.

[matheo]

@FrozenPandaz the polyfill works!

Thanks for using your great skills here @vsavkin!

[jeneg]

Hi, @matheo did you add this 'polyfill' to every test-setup.ts file where used or there is a way to make it global for workspace?

[matheo]

@jeneg exactly, I have my own @myproject/testing library with some polyfills and I just imported them in one line next to the jest-preset-angular import.

[mukesh210397-bandi]

hi anyone can please share the spec file for the above drag functions? @matheo

[matheo]

@mukesh210397-bandi I didn't have special tests around drag-drop, I just got this error having a directive listening DragEvents.

[mukesh210397-bandi]

thank you @matheo , I was trying to writes specs for the below code :
@HostListener("dragover", ["$event"]) onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = true;
}

not yet solved .