NX workspace - angular 14 - jest not working - ts-jest

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