feat(testing): support jest 28

packages/angular/migrations.json

@@ -1462,6 +1462,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "14.6.0": {
+      "version": "14.6.0-beta.0",
+      "packages": {
+        "jest-preset-angular": {
+          "version": "~12.2.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/src/utils/versions.ts

@@ -18,7 +18,7 @@ export const postcssUrlVersion = '~10.1.3';
 export const autoprefixerVersion = '^10.4.0';
 export const tsNodeVersion = '10.9.1';
 
-export const jestPresetAngularVersion = '~11.1.2';
+export const jestPresetAngularVersion = '~12.2.0';
 export const protractorVersion = '~7.0.0';
 export const karmaVersion = '~6.4.0';
 export const karmaChromeLauncherVersion = '~3.1.0';

packages/jest/migrations.json

@@ -59,6 +59,18 @@
       "cli": "nx",
       "description": "Exclude jest.config.ts from tsconfig where missing.",
       "factory": "./src/migrations/update-14-0-0/update-jest-config-ext"
+    },
+    "update-configs-jest-28": {
+      "version": "14.6.0-beta.0",
+      "cli": "nx",
+      "description": "Update jest configs to support jest 28 changes (https://jestjs.io/docs/upgrading-to-jest28#configuration-options)",
+      "factory": "./src/migrations/update-14-6-0/update-configs-jest-28"
+    },
+    "update-tests-jest-28": {
+      "version": "14.6.0-beta.0",
+      "cli": "nx",
+      "description": "Update jest test files  to support jest 28 changes (https://jestjs.io/docs/upgrading-to-jest28)",
+      "factory": "./src/migrations/update-14-6-0/update-tests-jest-28"
     }
   },
   "packageJsonUpdates": {
@@ -151,6 +163,43 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "14.6.0": {
+      "version": "14.6.0-beta.0",
+      "packages": {
+        "jest": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/jest": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "expect": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "@jest/globals": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "jest-jasmine2": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "jest-environment-jsdom": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        },
+        "ts-jest": {
+          "version": "~28.0.5",
+          "alwaysAddToPackageJson": false
+        },
+        "babel-jest": {
+          "version": "~28.1.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/jest/package.json

@@ -33,16 +33,16 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@jest/reporters": "27.5.1",
-    "@jest/test-result": "27.5.1",
+    "@jest/reporters": "28.1.1",
+    "@jest/test-result": "28.1.1",
     "@nrwl/devkit": "file:../devkit",
     "@phenomnomnominal/tsquery": "4.1.1",
     "chalk": "4.1.0",
     "dotenv": "~10.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest-config": "27.5.1",
-    "jest-resolve": "27.5.1",
-    "jest-util": "27.5.1",
+    "jest-config": "28.1.1",
+    "jest-resolve": "28.1.1",
+    "jest-util": "28.1.1",
     "resolve.exports": "1.1.0",
     "rxjs": "^6.5.4",
     "tslib": "^2.3.0"

packages/jest/preset/jest-preset.ts

@@ -7,4 +7,20 @@ export const nxPreset = {
     '^.+\\.(ts|js|html)$': 'ts-jest',
   },
   testEnvironment: 'jsdom',
+  /**
+   * manually set the exports names to load in common js, to mimic the behaviors of jest 27
+   * before jest didn't fully support package exports and would load in common js code (typically via main field). now jest 28+ will load in the browser esm code, but jest esm support is not fully supported.
+   * In this case we will tell jest to load in the common js code regardless of environment.
+   *
+   * this can be removed via just overriding this setting in it's usage
+   *
+   * @example
+   * module.exports = {
+   *   ...nxPreset,
+   *   testEnvironmentOptions: {},
+   * }
+   */
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'require', 'default'],
+  },
 };

packages/jest/src/generators/init/init.ts

@@ -64,6 +64,7 @@ function updateDependencies(tree: Tree, options: NormalizedSchema) {
   const devDeps = {
     '@nrwl/jest': nxVersion,
     jest: jestVersion,
+    'jest-environment-jsdom': jestVersion,
 
     // because the default jest-preset uses ts-jest,
     // jest will throw an error if it's not installed

packages/jest/src/migrations/update-14-6-0/update-configs-jest-28.spec.ts

@@ -0,0 +1,199 @@
+import { readJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { libraryGenerator as workspaceLib } from '@nrwl/workspace';
+import {
+  checkDeps,
+  updateConfigsJest28,
+  updateJestConfig,
+} from './update-configs-jest-28';
+
+const mockJestConfig = `
+import { nxPreset } from '@nrwl/jest/preset'
+const myGlobals = ['Math', 'Promise'];
+
+export default {
+  ...nxPreset,
+  displayName: 'test-ng-app',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  extraGlobals: ['Math', 'Something'],
+  extraGlobals: [],
+  extraGlobals: myGlobals,
+  timers: 'fake',
+  timers: 'modern',
+  timers: 'legacy',
+  timers: 'real',
+  testURL: 'http://localhost',
+  testURL: "123abc",
+  testURL: \`BLAH\`,
+  testEnvironment: 'jsdom',
+  testRunner: 'jest-jasmine2',
+}
+`;
+describe('Jest Migration - jest 28 config support', () => {
+  it('should update "extraGlobals" config option', () => {
+    const actual = updateJestConfig(mockJestConfig);
+    expect(actual).not.toContain(`extraGlobals`);
+    expect(actual).toContain(`sandboxInjectedGlobals: ['Math', 'Something'],`);
+    expect(actual).toContain(`sandboxInjectedGlobals: [],`);
+    expect(actual).toContain(`sandboxInjectedGlobals: myGlobals,`);
+  });
+
+  it('should update "testURL" config option', () => {
+    const actual = updateJestConfig(mockJestConfig);
+    expect(actual).not.toContain(`testURL`);
+    expect(actual).toContain(
+      `testEnvironmentOptions: {url: 'http://localhost'},`
+    );
+    expect(actual).toContain(`testEnvironmentOptions: {url: "123abc"},`);
+    expect(actual).toContain(`testEnvironmentOptions: {url: \`BLAH\`},`);
+  });
+
+  it('should update "timers" config option', () => {
+    const actual = updateJestConfig(mockJestConfig);
+    expect(actual).not.toContain(`timers`);
+    expect(actual).toContain(`fakeTimers: { enableGlobally: false },`);
+    expect(actual).toContain(`fakeTimers: { enableGlobally: true },`);
+    expect(actual).toContain(`fakeTimers: { enableGlobally: true },`);
+    expect(actual).toContain(
+      `fakeTimers: { enableGlobally: true, legacyFakeTimers: true },`
+    );
+  });
+
+  it('should update jest-environment-jsdom if being used', async () => {
+    let tree = createTreeWithEmptyWorkspace();
+    tree.write(
+      `package.json`,
+      `{
+  "name": "jest-28-test",
+  "version": "0.0.0",
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^27.1.0",
+    "jest-preset-angular": "^11.0.0",
+    "nx": "14.1.6",
+    "ts-jest": "^27.0.2",
+    "ts-node": "9.1.1",
+    "typescript": "~4.6.2"
+  },
+  "dependencies": {
+  }
+}
+`
+    );
+
+    const actual = checkDeps(tree);
+    expect(actual).toEqual({
+      'jest-environment-jsdom': '28.1.1',
+    });
+  });
+
+  it('should update jest-jasmine2 if being used as a test runner', () => {
+    let tree = createTreeWithEmptyWorkspace();
+    tree.write(
+      `package.json`,
+      `{
+  "name": "jest-28-test",
+  "version": "0.0.0",
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^27.1.1",
+    "jest-jasmine2": "^27.1.0",
+    "nx": "14.1.6",
+    "ts-jest": "^27.0.2",
+    "ts-node": "9.1.1",
+    "typescript": "~4.6.2"
+  },
+  "dependencies": {
+  }
+}
+`
+    );
+
+    tree.write(
+      'jest.preset.js',
+      `
+const nxPreset = require('@nrwl/jest/preset').default;
+module.exports = {
+  ...nxPreset,
+  testRunner: 'jest-jasmine2',
+};`
+    );
+
+    const actual = checkDeps(tree);
+    expect(actual).toEqual({
+      'jest-jasmine2': '28.1.1',
+    });
+  });
+
+  it('should not install deps if they are not used', () => {
+    let tree = createTreeWithEmptyWorkspace();
+    tree.write(
+      `package.json`,
+      `{
+  "name": "jest-28-test",
+  "version": "0.0.0",
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^27.1.0",
+    "nx": "14.1.6",
+    "ts-jest": "^27.0.2",
+    "ts-node": "9.1.1",
+    "typescript": "~4.6.2"
+  },
+  "dependencies": {
+  }
+}
+`
+    );
+
+    const actual = checkDeps(tree);
+    expect(actual).toEqual({});
+  });
+
+  it('should update deps from jest.config.ts', async () => {
+    let tree = createTreeWithEmptyWorkspace();
+    await workspaceLib(tree, { name: 'my-lib', unitTestRunner: 'jest' });
+    tree.write(
+      'libs/my-lib/jest.config.ts',
+      `
+export default {
+  displayName: 'test-ng-app',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\\\.(html|svg)$',
+    },
+  },
+  testEnvironment: 'jsdom',
+  testRunner: 'jest-jasmine2',
+  coverageDirectory: '../../coverage/apps/test-ng-app',
+  transform: {
+    '^.+\\\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\\\.mjs$|rxjs)',
+    // 'node_modules/(?!rxjs)'
+  ],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+}`
+    );
+    updateConfigsJest28(tree);
+
+    const packageJson = readJson(tree, 'package.json');
+    expect(packageJson.devDependencies).toEqual(
+      expect.objectContaining({
+        'jest-environment-jsdom': '28.1.1',
+        'jest-jasmine2': '28.1.1',
+      })
+    );
+  });
+});