feat(config): load zone ESM when running jest in ESM mode (#892)

Closes #751

e2e/test-app-v10/package.json

@@ -5,10 +5,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test-cjs-uniso": "jest --clearCache && jest -c=jest-cjs-uniso.config.js",
-    "test-cjs-iso": "jest --clearCache && jest -c=jest-cjs-iso.config.js",
-    "test-esm-iso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
-    "test-esm-uniso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
+    "pretest": "jest --clearCache",
+    "test-cjs-uniso": "yarn pretest && jest -c=jest-cjs-uniso.config.js",
+    "test-cjs-iso": "yarn pretest && jest -c=jest-cjs-iso.config.js",
+    "test-esm-iso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
+    "test-esm-uniso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
   },
   "private": true,
   "dependencies": {

e2e/test-app-v11/package.json

@@ -5,10 +5,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test-cjs-uniso": "jest --clearCache && jest -c=jest-cjs-uniso.config.js",
-    "test-cjs-iso": "jest --clearCache && jest -c=jest-cjs-iso.config.js",
-    "test-esm-iso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
-    "test-esm-uniso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
+    "pretest": "jest --clearCache",
+    "test-cjs-uniso": "yarn pretest && jest -c=jest-cjs-uniso.config.js",
+    "test-cjs-iso": "yarn pretest && jest -c=jest-cjs-iso.config.js",
+    "test-esm-iso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
+    "test-esm-uniso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
   },
   "private": true,
   "dependencies": {

e2e/test-app-v9/package.json

@@ -5,10 +5,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test-cjs-uniso": "jest --clearCache && jest -c=jest-cjs-uniso.config.js",
-    "test-cjs-iso": "jest --clearCache && jest -c=jest-cjs-iso.config.js",
-    "test-esm-iso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
-    "test-esm-uniso": "jest --clearCache && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
+    "pretest": "jest --clearCache",
+    "test-cjs-uniso": "yarn pretest && jest -c=jest-cjs-uniso.config.js",
+    "test-cjs-iso": "yarn pretest && jest -c=jest-cjs-iso.config.js",
+    "test-esm-iso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-iso.config.js",
+    "test-esm-uniso": "yarn pretest && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js -c=jest-esm-uniso.config.js"
   },
   "private": true,
   "dependencies": {

jest-esm.config.js

@@ -6,8 +6,6 @@ module.exports = {
   preset: 'ts-jest/presets/default-esm',
   globals: {
     'ts-jest': {
-      // Currently `ts-jest` only supports ESM for `isolatedModules: true`
-      isolatedModules: true,
       tsconfig: 'tsconfig-esm.spec.json',
       useESM: true,
     },

package.json

@@ -65,6 +65,7 @@
     "@angular/compiler-cli": "^11.2.6",
     "@angular/core": "^11.2.6",
     "@angular/platform-browser": "^11.2.6",
+    "@angular/platform-browser-dynamic": "^11.2.6",
     "@commitlint/cli": "^12.1.0",
     "@commitlint/config-angular": "^12.0.1",
     "@jest/globals": "27.0.0-next.5",

src/__tests__/setup-jest.spec.ts

@@ -0,0 +1,37 @@
+/* eslint-disable jest/no-standalone-expect */
+
+import { PlatformRef } from '@angular/core';
+import { jest } from '@jest/globals';
+
+const mockInitTestEnvironment = jest.fn();
+const mockGetTestBed = jest.fn(() => {
+  return {
+    initTestEnvironment: mockInitTestEnvironment,
+  };
+});
+jest.mock('@angular/core/testing', () => {
+  return {
+    getTestBed: mockGetTestBed,
+  };
+});
+
+class BrowserDynamicTestingModuleStub {}
+const mockPlatformBrowserDynamicTesting = jest.fn(() => new PlatformRef());
+jest.mock('@angular/platform-browser-dynamic/testing', () => {
+  return {
+    BrowserDynamicTestingModule: new BrowserDynamicTestingModuleStub(),
+    platformBrowserDynamicTesting: mockPlatformBrowserDynamicTesting,
+  };
+});
+
+const shouldTest = !process.execArgv.includes('--experimental-vm-modules') ? test : test.skip;
+shouldTest('should initialize test environment with getTestBed() and initTestEnvironment()', async () => {
+  // @ts-expect-error testing purpose
+  await import('../config/setup-jest');
+
+  expect(mockGetTestBed).toHaveBeenCalled();
+  expect(mockInitTestEnvironment).toHaveBeenCalled();
+  expect(mockInitTestEnvironment.mock.calls[0][0]).toBeInstanceOf(BrowserDynamicTestingModuleStub);
+  expect(mockPlatformBrowserDynamicTesting).toHaveBeenCalled();
+  expect(mockPlatformBrowserDynamicTesting.mock.results[0].value).toBeInstanceOf(PlatformRef);
+});

src/config/setup-jest.ts

@@ -1,12 +1,12 @@
-'use strict';
-
 require('../utils/reflect-metadata');
 
 try {
   // If the user are using zone.js 0.11.1+
   // all jest support logic are implemented inside zone.js
-  // we only need to load zone-testing.umd.js module
-  require('zone.js/bundles/zone-testing-bundle.umd.js');
+  // we only need to load zone-testing module
+  !process.execArgv.includes('--experimental-vm-modules')
+    ? require('zone.js/bundles/zone-testing-bundle.umd.js')
+    : require('zone.js/fesm2015/zone-testing-bundle.min.js');
 } catch (err) {
   // Fallback logic to load zone and zone-patch
   // when the user still use zone.js 0.10.x

tsconfig-esm.spec.json

@@ -1,6 +1,8 @@
 {
   "extends": "./tsconfig.spec.json",
   "compilerOptions": {
-    "module": "ESNext"
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "importHelpers": false
   }
 }

website/.gitignore

@@ -18,3 +18,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

website/docs/guides/esm-support.md

@@ -7,7 +7,7 @@ To use `jest-preset-angular` with ESM support, you'll first need to check [ESM J
 
 `jest-preset-angular` supports ESM via a `ts-jest` config option [useESM](https://kulshekhar.github.io/ts-jest/docs/next/getting-started/options/useESM) in combination with jest config option [extensionsToTreatAsEsm](https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring).
 
-There is also a preset(../getting-started/presets.md) to work with ESM.
+There is also a [preset](../getting-started/presets.md) to work with ESM.
 
 ### Examples
 
@@ -64,3 +64,14 @@ module.exports = {
   }
 }
 ```
+
+:::tip
+
+Jest will attempt to load **ESM** files from `node_modules` with default `jest-resolve` which usually works for most of the cases.
+However, there are cases like Angular libraries **ESM** built files or **ESM** files which are outside `node_modules` might not be loaded
+correctly.
+
+To fix that, one can use `moduleNameMapper` in jest config to instruct Jest to load the correct **ESM** files or create a
+custom Jest [resolver](https://jestjs.io/docs/configuration#resolver-string).
+
+:::