Angular 13 upgrade - JEST issue

377 views Asked by At

I am upgrading my angular app from v12 to v13. It gets compiled without issues. Even ng build works fine. But the unit tests that were previously passed successfully using JEST are failing now.

Below is my package.json


  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular-devkit/build-angular": "~13.3.10",
    "@angular-devkit/schematics": "^13.3.10",
    "@angular-devkit/schematics-cli": "^0.803.29",
    "@angular/animations": "^13.3.12",
    "@angular/common": "~13.3.12",
    "@angular/compiler": "~13.3.12",
    "@angular/core": "^13.3.12",
    "@angular/forms": "~13.3.12",
    "@angular/platform-browser": "~13.3.12",
    "@angular/platform-browser-dynamic": "~13.3.12",
    "@angular/router": "~13.3.12",
    "@aspnet/signalr": "^1.1.4",
    "@briebug/jest-schematic": "^2.1.1",
    "@herodevs/lazy-af": "0.0.8",
    "@ng-bootstrap/ng-bootstrap": "^11.0.1",
    "@ng-idle/core": "^8.0.0-beta.4",
    "@ng-idle/keepalive": "^8.0.0-beta.4",
    "@ng-select/ng-select": "^7.4.0",
    "@ngrx/effects": "^12.5.1",
    "@ngrx/entity": "^12.5.1",
    "@ngrx/router-store": "^12.5.1",
    "@ngrx/store": "^12.5.1",
    "@ngrx/store-devtools": "^12.5.1",
    "@ngx-loading-bar/router": "^4.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sweetalert2/ngx-sweetalert2": "^5.0.1",
    "@swimlane/ngx-charts": "^18.0.1",
    "@swimlane/ngx-datatable": "^20.1.0",
    "@types/crypto-js": "^3.1.43",
    "@types/lodash": "^4.14.136",
    "angular-2-dropdown-multiselect": "^1.9.0",
    "angular-calendar": "^0.28.28",
    "angular-confirmation-popover": "~4.2.0",
    "angular-sortablejs": "~2.7.0",
    "angular2-ladda": "~2.0.0",
    "angular2-text-mask": "~9.0.0",
    "bootstrap": "~4.3.1",
    "chart.js": "^2.8.0",
    "chartist": "~0.11.0",
    "core-js": "^2.6.12",
    "crypto-js": "^3.3.0",
    "date-fns": "^1.29.0",
    "devextreme": "22.1.6",
    "devextreme-angular": "22.1.6",
    "devextreme-schematics": "^1.2.4",
    "file-saver": "^2.0.2",
    "guid-typescript": "^1.0.9",
    "hammerjs": "~2.0.8",
    "highlight.js": "~9.15.6",
    "http-status-codes": "^1.3.2",
    "intl": "~1.2.5",
    "lodash": "^4.17.15",
    "marked": "^0.7.0",
    "masonry-layout": "~4.2.1",
    "moment": "~2.24.0",
    "moment-timezone": "~0.5.31",
    "ng-block-ui": "~2.1.1",
    "ng-chartist": "~4.1.0",
    "ng-circle-progress": "^1.5.0",
    "ng-http-loader": "^5.0.0",
    "ng2-archwizard": "~2.1.0",
    "ng2-charts": "~2.2.0",
    "ng2-color-picker": "~1.3.2",
    "ng2-completer": "^2.0.8",
    "ng2-daterangepicker": "^3.0.1",
    "ng2-dragula": "~2.1.1",
    "ng2-file-upload": "~1.3.0",
    "ng2-img-cropper": "^0.9.0",
    "ng2-nouislider": "~1.7.7",
    "ng2-password-strength-bar": "~1.2.0",
    "ng2-smart-table": "~1.4.0",
    "ngrx-data": "^6.1.0-beta.3",
    "ngrx-store-localstorage": "^7.0.1",
    "ngx-chips": "^3.0.0",
    "ngx-clipboard": "~12.0.0",
    "ngx-color-picker": "~7.4.0",
    "ngx-contextmenu": "~5.1.1",
    "ngx-datetime-range-picker": "^1.1.3",
    "ngx-dropzone-wrapper": "~7.2.1",
    "ngx-image-gallery": "~1.3.0",
    "ngx-markdown-editor": "~1.2.0",
    "ngx-moment": "^3.5.0",
    "ngx-order-pipe": "^2.0.3",
    "ngx-perfect-scrollbar": "~7.2.1",
    "ngx-strongly-typed-forms": "^8.0.0",
    "ngx-swiper-wrapper": "~7.2.1",
    "ngx-textarea-autosize": "^2.0.0",
    "ngx-toastr": "^13.2.1",
    "ngx-tour-core": "^4.2.0",
    "ngx-tour-ng-bootstrap": "~4.0.1",
    "ngx-translate-multi-http-loader": "^3.0.0",
    "ngx-trend": "^8.0.0",
    "ngx-xml2json": "^1.0.2",
    "nouislider": "~13.1.4",
    "numeral": "~2.0.6",
    "plyr": "~2.0.18",
    "quill": "^1.3.7",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "sortablejs": "~1.8.4",
    "spinkit": "~1.2.5",
    "stream-browserify": "^2.0.2",
    "swagger-ui-dist": "^3.37.2",
    "sweetalert2": "~8.7.0",
    "text-mask-addons": "~3.8.0",
    "toastr": "~2.1.4",
    "ts-mockito": "^2.3.1",
    "tslib": "^2.0.0",
    "vkbeautify": "^0.99.3",
    "xlsx": "^0.14.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/cli": "~13.3.10",
    "@angular/compiler-cli": "~13.3.12",
    "@angular/language-service": "~13.3.12",
    "@ngrx/schematics": "^12.5.1",
    "@types/chartist": "~0.9.38",
    "@types/jest": "24.0.23",
    "@types/node": "^12.11.1",
    "@types/numeral": "~0.0.22",
    "@typescript-eslint/eslint-plugin": "^2.3.1",
    "@typescript-eslint/parser": "^2.3.1",
    "codelyzer": "^6.0.0",
    "devextreme-intl": "^19.1.8",
    "eslint": "^6.6.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^6.3.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-json": "^1.4.0",
    "eslint-plugin-prettier": "^3.2.0",
    "jasmine-marbles": "^0.5.0",
    "jest": "^26.6.3",
    "jest-canvas-mock": "^2.3.0",
    "jest-createspyobj": "^1.2.2",
    "jest-environment-jsdom-fourteen": "^1.0.1",
    "jest-junit": "^10.0.0",
    "jest-marbles": "^2.3.1",
    "jest-preset-angular": "^8.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.18.2",
    "protractor": "~7.0.0",
    "ts-jest": "^26.5.6",
    "ts-node": "~7.0.0",
    "typescript": "~4.6.4",
    "webpack-bundle-analyzer": "^3.6.1"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "roots": [
      "src"
    ],
    "transform": {
      "^.+\\.(ts|js|html)$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx)"
    ],
    "setupFiles": [
      "jest-canvas-mock"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupJest.ts"
    ],
    "moduleNameMapper": {
      "@app/(.*)": "<rootDir>/src/app/$1",
      "@assets/(.*)": "<rootDir>/src/assets/$1",
      "@authentication/(.*)": "<rootDir>/src/app/core/authentication/$1",
      "@core/(.*)": "<rootDir>/src/app/core/$1",
      "@environments/(.*)": "<rootDir>/src/environments/$1",
      "@home/(.*)": "<rootDir>/src/app/areas/home/$1",
      "@layout/(.*)": "<rootDir>/src/app/layout/$1",
      "@node_modules/(.*)": "<rootDir>/node_modules/$1",
      "@root-store/(.*)": "<rootDir>/src/app/root-store/$1",
      "@shared/(.*)": "<rootDir>/src/app/shared/$1",
      "@src/(.*)": "<rootDir>/src/$1",
      "@vendor/(.*)": "<rootDir>/src/vendor/$1"
    },
    "reporters": [
      "default",
      "jest-junit"
    ],
    "coverageReporters": [
      "cobertura",
      "text",
      "html"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/src/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$",
        "astTransformers": [
          "jest-preset-angular/build/InlineFilesTransformer",
          "jest-preset-angular/build/StripStylesTransformer"
        ]
      }
    }
  }

I am getting the below error:

** Cannot find module '@angular/core/testing' from 'node_modules/jest-preset-angular/build/setup-jest.js'

Require stack:
  node_modules/jest-preset-angular/build/setup-jest.js
  node_modules/jest-preset-angular/setup-jest.js
  src/setupJest.ts

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)**

Any help would be appreciated.

0

There are 0 answers