I am facing this error in my circle pipeline after I upgrade angular version from 15 to 16 and it fails multiple tests.

Cannot find module ‘zone.js/bundles/zone-testing-bundle.umd’ from
‘../../node_modules/jest-preset-angular/setup-jest.js’

I searched online and found resource which didn’t help with a fix.

What am I missing here?

package.json

{
  "name": "@xyz/source",
  "workspaces": [
    "apps/*",
    "libs/*",
    "tools/local-proxy"
  ],
  "scripts": {
    "prepare": "npx husky install",
    "build": "nx run-many --target=build --output-style=stream",
    "build:reverse-proxy": "nx run-many --target=build-dev",
    "serve:bff": "nx run nestjs-bff:serve",
    "watch:dashboard": "nx run ng-dashboard:watch",
    "serve": "nx serve nestjs-bff",
    "serve:mock": "nx serve nestjs-bff -c=mock",
    "lint-staged": "lint-staged",
    "lint": "nx affected --target=lint --output-style=stream",
    "stylelint": "nx affected --target=stylelint",
    "test": "npx nx affected -t=test --parallel=3 --maxWorkers=25%",
    "test:ci": "npx nx affected -t=test --parallel=3 -c=ci --maxWorkers=25%",
    "test:uncommitted": "npx nx affected -t=test --parallel=3 --uncommitted --maxWorkers=25%",
    "test:all": "npx nx run-many -t=test --parallel=3 --maxWorkers=25%"
  },
  "lint-staged": {
    "*.scss": [
      "stylelint"
    ],
    "*.ts": [
      "eslint"
    ],
    "*.{ts,scss}": [
      "prettier --write"
    ]
  },
  "prettier": "@moments/prettier-config",
  "jest-junit": {
    "addFileAttribute": "true"
  },
  "dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/material-luxon-adapter": "^16.2.14",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/platform-server": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@angular/service-worker": "^17.3.0",
    "@apollo/client": "3.8.4",
    "@auth0/auth0-angular": "^2.2.3",
    "@brand-marketing/ts-qls-override": "^0.0.9",
    "@experiences-bff/interfaces": "^2.1.0",
    "@experiences-bff/plugin-proxy": "^3.3.3",
    "@experiences/express-logger": "^2.0.6",
    "@hapi/hapi": "^19",
    "@moments/qls-tools": "^2.0.0",
    "@moments/sc-global-ui": "6.1.12",
    "@nestjs/axios": "^3.0.1",
    "@nestjs/cache-manager": "^2.2.0",
    "@nestjs/common": "^10.3.0",
    "@nestjs/config": "^3.1.1",
    "@nestjs/core": "^10.3.0",
    "@nestjs/platform-express": "^10.3.0",
    "@nestjs/schedule": "^4.0.0",
    "@nestjs/serve-static": "^4.0.0",
    "@nestjs/swagger": "^7.2.0",
    "@ngrx/effects": "^15",
    "@ngrx/entity": "^15",
    "@ngrx/router-store": "^15",
    "@ngrx/store": "^15",
    "@ngrx/store-devtools": "^15",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",            
    "@swc/helpers": "0.5.2",
    "ansi-regex": "^6.0.1",
    "axios": "1.6.5",
    "bcrypt": "^5.1.1",
    "cache-manager": "^4.1.0",
    "chart.js": "^3.9.1",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.6",
    "core-js": "~3.2.1",
    "express": "^4.17.1",
    "graphql": "^15.0.0",
    "joi": "^17.6.4",
    "loader-utils": "^2.0.4",
    "lodash": "^4.17.20",
    "luxon": "^2.0.0",
    "nestjs-pino": "^4.0.0",
    "ngx-mask": "^13.1.15",
    "ngx-observable-input": "^3.0.3",
    "node-cache": "^5.1.2",
    "node-fetch": "^2.6.1",
    "pino": "^8.0.0",
    "pino-http": "^8.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.4.0",
    "swiper": "^9.4.1",
    "tslib": "^2.3.0",
    "ua-parser-js": "^0.7.23",
    "url-parse": "^1.4.7",
    "uuid": "^9.0.0",
    "uuid-by-string": "^4.0.0",
    "whatwg-fetch": "^3.6.2",
    "zone.js": "^0.14.4"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^16.0.4",
    "@angular-devkit/architect": "^0.1602.12",
    "@angular-devkit/build-angular": "^16.2.12",
    "@angular-devkit/core": "^16.2.12",
    "@angular-devkit/schematics": "^16.2.12",
    "@angular-eslint/builder": "^16.2.0",
    "@angular-eslint/eslint-plugin": "^16.2.0",
    "@angular-eslint/eslint-plugin-template": "^16.2.0",
    "@angular-eslint/schematics": "^16.2.0",
    "@angular-eslint/template-parser": "^16.2.0",
    "@angular/cli": "^16.2.12",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@angular/material": "^16.2.14",
    "@axe-core/cli": "=4.2.2",
    "@babel/core": "^7.18.13",
    "@compodoc/compodoc": "^1.1.19",
    "@cypress/grep": "^3.1.5",
    "@moments/eslint-config": "^1.0.6",
    "@moments/prettier-config": "^1.0.3",
    "@moments/stylelint-config": "^1.0.2",
    "@nestjs/cli": "^10.3.0",
    "@nestjs/schematics": "^10.1.0",
    "@nestjs/testing": "^10.3.0",
    "@ngneat/spectator": "^10.0.1",
    "@nrwl/linter": "17.0.3",
    "@nx/angular": "17.0.3",
    "@nx/cypress": "17.0.3",
    "@nx/devkit": "17.0.3",
    "@nx/eslint-plugin": "17.0.3",
    "@nx/jest": "17.0.3",
    "@nx/js": "17.0.3",
    "@nx/nest": "17.0.3",
    "@nx/node": "17.0.3",
    "@nx/plugin": "17.0.3",
    "@nx/web": "17.0.3",
    "@nx/webpack": "17.0.3",
    "@schematics/angular": "^15.2.9",
    "@sitecore-jss/sitecore-jss-cli": "^21.0.0",
    "@swc-node/register": "1.6.8",
    "@swc/cli": "0.1.62",
    "@swc/core": "1.3.90",
    "@swc/jest": "^0.2.29",
    "@testing-library/angular": "^14.3.0",
    "@testing-library/jest-dom": "^6.1.3",
    "@types/bcrypt": "^5.0.0",
    "@types/cache-manager": "^4.0.2",
    "@types/chart.js": "^2.9.37",
    "@types/cookie-parser": "^1.4.3",
    "@types/express": "^4.17.13",
    "@types/google.maps": "^3.50.2",
    "@types/jest": "^29.4.0",
    "@types/luxon": "^3.0.1",
    "@types/mock-req-res": "^1.1.2",
    "@types/node": "18.7.1",
    "@types/supertest": "^2.0.8",
    "@types/yaml": "^1.9.7",
    "@typescript-eslint/eslint-plugin": "5.61.0",
    "@typescript-eslint/parser": "5.61.0",
    "@yarnpkg/pnpify": "^4.0.0-rc.32",
    "apollo-angular": "^5.0.2",
    "babel-loader": "^8.2.5",
    "babel-preset-airbnb": "^5.0.0",
    "body-parser": "~1.19.0",
    "case": "^1.6.3",
    "chalk": "~2.4.2",
    "chokidar": "^3.5.3",
    "chromedriver": "^90.0.0",
    "cross-env": "~6.0.2",
    "cypress": "^13.0.0",
    "cypress-axe": "^1.4.0",
    "cypress-visual-regression": "^3.0.0",
    "enhanced-resolve": "4.1.0",
    "eslint": "8.46.0",
    "eslint-plugin-cypress": "2.13.4",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "^23.7.0",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "express": "~4.17.1",
    "fs-extra": "^8.1.0",
    "glob": "^10.3.10",
    "husky": "^7.0.0",
    "isomorphic-fetch": "^3.0.0",
    "jasmine-marbles": "^0.9.2",
    "jest": "^29.4.1",
    "jest-canvas-mock": "~2.5.2",
    "jest-codemods": "^0.31.0",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-junit": "^15.0.0",
    "jest-preset-angular": "13.1.1",
    "js-cookie": "^2.2.1",
    "jscodeshift": "^0.15.0",
    "jsonc-eslint-parser": "^2.1.0",
    "jsonfile": "^6.1.0",
    "lint-staged": "^11.2.3",
    "mock-express-request": "^0.2.2",
    "mock-express-response": "^0.2.2",
    "mock-req-res": "^1.2.0",
    "mountebank": "^2.8.2",
    "ng-mocks": "^14.11.0",
    "ng-packagr": "~14.2.0",
    "nodemon": "^2.0.2",
    "npm-run-all": "~4.1.5",
    "nx": "17.0.3",
    "postcss": "^8.4.20",
    "postcss-import": "~14.1.0",
    "postcss-preset-env": "~7.5.0",
    "postcss-scss": "^4.0.6",
    "postcss-url": "~10.1.3",
    "prettier": "^2.6.2",
    "protractor": "^7.0.0",
    "replace-in-file": "^6.3.2",
    "resize-observer-polyfill": "^1.5.1",
    "sinon": "11.0.0",
    "supertest": "^4.0.2",
    "ts-jest": "29.1.0",
    "ts-loader": "~6.2.0",
    "ts-node": "10.9.1",
    "tsconfig-paths": "^4.1.2",
    "typescript": "^4.9.3",
    "webpack": "5.85.0",
    "webpack-cli": "^5.0.1",
    "yaml": "^2.0.0-9",
    "yaml-lint": "^1.2.4",
    "yargs": "^17.3.1"
  },
  "engines": {
    "node": ">=18.17.1",
    "npm": ">=9.6.7"
  },
  "overrides": {
    "@hapi/hapi": "^19",
    "axios": "$axios",
    "semver@>=6.0.0 <6.3.1": "6.3.1",
    "semver@>=5.0.0 <5.7.2": "5.7.2",
    "semver@>=7.0.0 <7.5.2": "7.5.2"
  }
}

jest.preset.angular.js

const { pathsToModuleNameMapper } = require('ts-jest');
const nxPreset = require('@nx/jest/preset').default;
const { compilerOptions } = require('./tsconfig.base.json');

const esModules = [
  '@angular-architects',
  'swiper',
  'ssr-window',

].join('|');

module.exports = {
  ...nxPreset,
  coverageReporters: [...nxPreset.coverageReporters, 'lcov'],
  snapshotFormat: { escapeString: true, printBasicPrototype: true },
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts', 'jest-canvas-mock'],
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  extensionsToTreatAsEsm: ['.ts'],
  transform: {
    [`node_modules\\(${esModules}).+\.(ts|js)$`]: '@swc/jest',
    [`node_modules/(${esModules}).+\.(ts|js)$`]: '@swc/jest',
    '^.+\.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\.(html|svg)$',
        useESM: true,
        isolatedModules: true,
      },
    ],
  },
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
    prefix: process.cwd(),
  }),
  transformIgnorePatterns: [`/node_modules/(?!${esModules}|.*\.mjs)`],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};