NX workspace - angular 14 - jest not working

Question

I'm trying to upgrade my angular 13 NX workspaces to angular 14, but somehow I can't get my jest unit tests to work properly. I tried the following from zero:

Install @angular/cli and nx globally:

npm install --global @angular/cli@latest
npm install --global nx@latest

Open and cmd in a path without spaces

npx create-nx-workspace
> test
> angular
> demo
> scss

Result:

Nx is creating your v13.10.5 workspace

So now I could migrate to the latest NX workspace version

cd test
nx migrate latest

The @angular/cli version is still on 13, so I changed this in the root package.json to 14.0.1 (nx removes the version annotations ~ and ^...)

npm install doesn't work out. jest-preset-angular@11.1.2 requires @angular-devkit/build-angular@">=0.1002.4" while in the workspace this is a dependency fixed at @angular-devkit/build-angular@"14.0.1":

npm ERR! Found: @angular-devkit/build-angular@13.3.7
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"14.0.1" from the root project
npm ERR!   peer @angular-devkit/build-angular@">=0.1002.4" from jest-preset-angular@11.1.1
npm ERR!   node_modules/jest-preset-angular
npm ERR!     dev jest-preset-angular@"11.1.2" from the root project

So I run update instead:

npm update
npx nx migrate --run-migrations

I'm able to run the project

npm start -- --open

Before we can run the command for the unit tests, add the following script under the root package.json scripts section:

{
  ...,
  "scripts: {
    ...,
    "nx": "nx"
  }
}

Now I'm unable to run the unit tests:

npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless

 FAIL   demo  apps/demo/src/app/app.component.spec.ts
  ● Test suite failed to run

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

    Require stack:
      C:/repos/b/test/node_modules/jest-preset-angular/build/config/setup-jest.js
      C:/repos/b/test/node_modules/jest-preset-angular/setup-jest.js
      src/test-setup.ts

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)

Note that the module is definitely installed:

Other Q&A's suggest updating jest-preset-angular, so I did. I changed it to 12.1.0 in the package.json. This requires jest@28.1.1, so changed that too. And ts-jest should be at 28.0.5.

Running npm update succeeds now. But running the unit tests

npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless

now gives the following errors:

ReferenceError: document is not defined
NG0200: Circular dependency in DI detected for TestComponentRenderer. Find more at https://angular.io/errors/NG0200
NG0200: Circular dependency in DI detected for InjectionToken DocumentToken. Find more at https://angular.io/errors/NG0200
...

It litterally suggests the following:

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

So I installed it:

npm i --save-dev jest-environment-jsdom

And updated the root jest.config.js:

module.exports = {
  projects: getJestProjects(),
  testEnvironment: 'jest-environment-jsdom'
};

This still gives me the same error. I also tried with testEnvironment: 'jsdom' without success. So how can I fix this? Or do I have to wait until the NX developers release a new stable version?

Answer 1

As of today (like just now...) I was able to upgrade to 14.

nx migrate latest

Open the root package.json file

• restore the ~ and ^
• remove the @angular/eslint packages which are still on 13
• manually change @angular/cli to 14.0.0

Then npm update and npx nx migrate --run-migrations were working as expected. You'll see warnings about the tsconfig. You need to open each library's project.json and add

"targets:build:options:tsConfig": "libs/my-lib/tsconfig.lib.json"

The test section doesn't need modifications, it would say that the tsconfig field there is deprecated.

This is my final root package.json

{
  "name": "mintplayer-ng-bootstrap",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "nx": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~14.0.2",
    "@angular/cdk": "~14.0.1",
    "@angular/common": "~14.0.2",
    "@angular/compiler": "~14.0.2",
    "@angular/core": "~14.0.2",
    "@angular/forms": "~14.0.2",
    "@angular/platform-browser": "~14.0.2",
    "@angular/platform-browser-dynamic": "~14.0.2",
    "@angular/router": "~14.0.2",
    "@mintplayer/ng-pagination": "~14.0.0",
    "@nrwl/angular": "14.3.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.2",
    "ngx-highlightjs": "~6.1.1",
    "qrcode": "^1.5.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.0.2",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "~14.0.2",
    "@angular/language-service": "~14.0.2",
    "@nrwl/cli": "14.3.5",
    "@nrwl/cypress": "14.3.5",
    "@nrwl/eslint-plugin-nx": "14.3.5",
    "@nrwl/jest": "14.3.5",
    "@nrwl/linter": "14.3.5",
    "@nrwl/workspace": "14.3.5",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/qrcode": "^1.4.2",
    "@typescript-eslint/eslint-plugin": "~5.24.0",
    "@typescript-eslint/parser": "~5.24.0",
    "cypress": "^9.1.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.5.1",
    "jest-preset-angular": "11.1.2",
    "ng-packagr": "^14.0.2",
    "postcss": "^8.4.5",
    "postcss-import": "^14.1.0",
    "postcss-preset-env": "^7.5.0",
    "postcss-url": "^10.1.3",
    "prettier": "^2.6.2",
    "ts-jest": "27.1.4",
    "typescript": "~4.7.3",
    "nx": "14.3.5"
  }
}

The related project is hosted here