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?
