feat(tests): upgrade jest-preset-angular with Jest 27

ghiscoding · Jun 4, 2021 · c68a5e6 · c68a5e6
1 parent 782f8e3
commit c68a5e6
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 68 deletions.
diff --git a/angular.json b/angular.json
@@ -14,7 +14,7 @@
             "outputPath": "docs",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "showCircularDependencies": true,
             "polyfills": "src/polyfills.ts",
             "allowedCommonJsDependencies": [
@@ -132,7 +132,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/font-awesome/css/font-awesome.css",
@@ -179,8 +179,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"

diff --git a/package.json b/package.json
@@ -153,9 +153,9 @@
     "custom-event-polyfill": "^1.0.7",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "jest": "^24.9.0",
+    "jest": "^27.0.3",
     "jest-extended": "^0.11.5",
-    "jest-preset-angular": "^6.0.1",
+    "jest-preset-angular": "^9.0.1",
     "ng-packagr": "^12.0.2",
     "ngx-bootstrap": "^6.2.0",
     "npm-run-all": "^4.1.5",
@@ -169,7 +169,7 @@
     "ts-node": "^10.0.0",
     "tslib": "^2.2.0",
     "tslint": "~6.1.3",
-    "typescript": "4.2.4",
+    "typescript": "~4.2.4",
     "yargs": "^17.0.1",
     "zone.js": "~0.11.4"
   }

diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts
@@ -29,12 +29,6 @@ import {
 } from './../services/utilities';
 import { BindingEventService } from '../services/bindingEvent.service';
 
-declare function require(name: string): any;
-require('flatpickr');
-
-// using external non-typed js libraries
-declare const $: any;
-
 /*
  * An example of a date picker editor using Flatpickr
  * https://chmln.github.io/flatpickr

diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
diff --git a/test/jest-global-mocks.ts b/test/jest-global-mocks.ts
@@ -16,10 +16,27 @@ Object.defineProperty(window, 'getComputedStyle', {
 
 Object.defineProperty(window, '__env', { value: { env: { backendUrl: 'mocked URL' } } });
 
+Object.defineProperty(window, 'CSS', { value: null });
+Object.defineProperty(document, 'doctype', {
+  value: '<!DOCTYPE html>',
+});
 Object.defineProperty(window, 'getComputedStyle', {
-  value: () => ({
-    getPropertyValue: (prop) => {
-      return '';
-    }
-  })
+  value: () => {
+    return {
+      display: 'none',
+      appearance: ['-webkit-appearance'],
+    };
+  },
 });
+/**
+ * ISSUE: https://github.com/angular/material2/issues/7101
+ * Workaround for JSDOM missing transform property
+ */
+Object.defineProperty(document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    };
+  },
+});
diff --git a/test/jest-pretest.ts b/test/jest-pretest.ts
@@ -1,11 +1,11 @@
-import * as jQuery from 'jquery';
+import jQuery from 'jquery';
 
 (global as any).$ = (global as any).jQuery = jQuery;
 (window as any).$ = (window as any).jQuery = jQuery;
 (global as any).navigator = { userAgent: 'node.js' };
 (global as any).Slick = (window as any).Slick = {};
-require('jquery-ui-dist/jquery-ui');
-require('slickgrid/lib/jquery.event.drag-2.3.0');
-require('slickgrid/slick.core');
-require('slickgrid/slick.dataview');
-require('slickgrid/slick.grid');
+import 'jquery-ui-dist/jquery-ui';
+import 'slickgrid/lib/jquery.event.drag-2.3.0';
+import 'slickgrid/slick.core';
+import 'slickgrid/slick.dataview';
+import 'slickgrid/slick.grid';
diff --git a/test/jest.config.js b/test/jest.config.js
@@ -1,10 +1,21 @@
+
+require('jest-preset-angular/ngcc-jest-processor');
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+
 module.exports = {
   rootDir: '../',
   globals: {
     'ts-jest': {
-      tsConfigFile: '<rootDir>/src/tsconfig.spec.json',
+      allowSyntheticDefaultImports: true,
+      diagnostics: false,
+      isolatedModules: true,
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.html$',
+      astTransformers: [
+        'jest-preset-angular/InlineHtmlStripStylesTransformer'
+      ]
     },
-    __TRANSFORM_HTML__: true,
   },
   globalSetup: '<rootDir>/test/jest-global-setup.js',
   collectCoverage: false,
@@ -43,16 +54,18 @@ module.exports = {
     'dist',
     'node_modules'
   ],
+  preset: 'jest-preset-angular',
   setupFiles: ['<rootDir>/test/jest-pretest.ts'],
   setupFilesAfterEnv: ['jest-extended', '<rootDir>/test/setup-jest.ts'],
   transform: {
-    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+    '^.+\\.(ts|html)$': 'ts-jest'
   },
   transformIgnorePatterns: [
     'node_modules/(?!@ngrx)',
     '<rootDir>/node_modules/angular-slickgrid/',
     '<rootDir>/node_modules/slickgrid/'
   ],
+  // testEnvironment: 'node',
   testMatch: ['**/__tests__/**/*.+(ts|js)', '**/+(*.)+(spec|test).+(ts|js)'],
   testPathIgnorePatterns: [
     '/node_modules/',

diff --git a/test/setup-jest.ts b/test/setup-jest.ts
@@ -1,2 +1,2 @@
 import 'jest-preset-angular';
-import './jest-global-mocks';
+import './jest-global-mocks';
diff --git a/test/tsconfig.spec.json b/test/tsconfig.spec.json
diff --git a/src/tsconfig.app.json → tsconfig.app.json b/src/tsconfig.app.json → tsconfig.app.json
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
@@ -0,0 +1,24 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./out-tsc/spec",
+    "module": "commonjs",
+    "types": [
+      "jest",
+      "jest-extended",
+      "jquery",
+      "node"
+    ]
+  },
+  "files": [
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}