search

thymikee / jest-preset-angular

Jest configuration preset for Angular projects.
https://thymikee.github.io/jest-preset-angular/
MIT License
885 stars 306 forks source link

[Bug]: Angular 14 support #1410

Closed henryruhs closed 2 years ago

henryruhs commented 2 years ago

Version

11

Steps to reproduce

Create brandnew Angular project via ng new with --next flag.

Expected behavior

Nothing to report here...

Actual behavior

At this point there is a dependency conflict:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: angular-net@1.0.0
npm ERR! Found: @angular-devkit/build-angular@14.0.0-next.11
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"14.0.0-next.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
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.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/henry/.npm/eresolve-report.txt for a full report.

Additional context

No response

Environment

System: MacOS
Node: 14
ghost commented 2 years ago

Jup. Just update an existing NX project will also get you this error if you go for Angular 14 now. Not sure if there is a workaround for this other than downgrading to angular 13. And I wonder why devkit hasn't been updated yet either.

ahnpnl commented 2 years ago

You can try this now with next tag

henryruhs commented 2 years ago

Thanks for the release, unfortunately I have to report that we are not done yet - not sure what piece in the puzzel is causing the issues but at least I can provide a working angular project:

master using angular 14-next.4 and some wild beta releases to get jest working: https://github.com/henryruhs/ngx-crud-playground/tree/master

branch using angular 14-rc.0 and latest jest dependencies - not working: https://github.com/henryruhs/ngx-crud-playground/tree/jest-with-angular-14

on my local machine it feels like a loop and got stucked with super high CPU usage. on the CI there at least some useful warnings and type errors: https://github.com/henryruhs/ngx-crud-playground/runs/6440488572

Option "testURL" was replaced by passing the URL via "testEnvironmentOptions.url".
TypeError: Cannot read property 'html' of undefined
satanTime commented 2 years ago

I see the errors above in nx projects only. Pure angular 14 + jest 28 works well.

ahnpnl commented 2 years ago

Cannot read html of undefined is because mismatch version between Jest and jest-environment-jsdom

Nx doesn’t have official support for Jest 28 yet so please contact them @henryruhs

henryruhs commented 2 years ago

Who said that I'm using nx? Check the dependencies... still using @angular-builders/jest.

ahnpnl commented 2 years ago

We have example app which you can try to reproduce your issue https://github.com/thymikee/jest-preset-angular/tree/main/examples Pls don't include any 3rd party tools in your reproduce repo to produce a pure reproduce scenario.

Also I noticed that @angular-builders/jest hasn't officially supported Jest 28 yet.

We now also have Angular 14 example app at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v14

satanTime commented 2 years ago

Ah, then the Nest command should help:

npm update --depth 999 jest-environment-jsdom

satanTime commented 2 years ago

In my case the blocker is @types/jest, it blocks jest-matcher-utils@^27.0.0 and doesn't allow jest-environment-jsdom to upgrade to 28.

henryruhs commented 2 years ago

@satanTime A temporary solution could be .npmrc file with force=true until the support landed there.

satanTime commented 2 years ago

Hi. My bad. It's not because of types. It's because of nx/jest. It locks some jest packets on 27 and it breaks everything. Force flag doesn't help with it.

henryruhs commented 2 years ago

For those who need a temporary solution for Angular 14 - I just found it... so the setup file is causing a loop for some reason, the workaround is an empty one. So this is my current setup of ngx-crud-playground as of 03.07.2022:

.npmrc

legacy-peer-deps=true

jest.config.js

module.exports =
{
    preset: 'jest-preset-angular',
    setupFilesAfterEnv:
    [
        '<rootDir>/jest.setup.ts'
    ],
    testPathIgnorePatterns:
    [
        '<rootDir>/cypress'
    ]
};

jest.setup.ts

// leave it empty
spyro2000 commented 2 years ago

I am sorry, but I still cannot get this resolved, even after

npm ERR! Found: jest@27.5.1
npm ERR! node_modules/jest
npm ERR!   dev jest@"^27.5.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/jest@14.0.0
npm ERR! node_modules/@angular-builders/jest
npm ERR!   dev @angular-builders/jest@"^14.0.0" from the root project

Here are all my dependencies from my package.json

"dependencies": {
    "@angular/animations": "^14.1.2",
    "@angular/cdk": "^14.1.1",
    "@angular/common": "^14.1.2",
    "@angular/compiler": "^14.1.2",
    "@angular/core": "^14.1.2",
    "@angular/forms": "^14.1.2",
    "@angular/material": "^14.1.1",
    "@angular/material-moment-adapter": "^14.1.1",
    "@angular/platform-browser": "^14.1.2",
    "@angular/platform-browser-dynamic": "^14.1.2",
    "@angular/router": "^14.1.2",
    "@material/layout-grid": "^14.0.0",
    "ag-charts-angular": "^6.1.0",
    "ag-charts-community": "^6.1.0",
    "ag-grid-angular": "^28.1.0",
    "ag-grid-community": "^28.1.0",
    "ag-grid-enterprise": "^28.1.0",
    "d3": "7.6.1",
    "d3-org-chart": "2.6.0",
    "file-saver": "^2.0.5",
    "lodash-es": "^4.17.21",
    "material-design-icons": "^3.0.1",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.34",
    "ng-let": "^14.0.1",
    "ngx-logger": "^5.0.11",
    "reconnecting-eventsource": "^1.5.1",
    "rxjs": "^7.5.6",
    "tslib": "^2.4.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-builders/jest": "^14.0.0",
    "@angular-devkit/build-angular": "^14.1.2",
    "@angular-eslint/builder": "^14.0.2",
    "@angular-eslint/eslint-plugin": "^14.0.2",
    "@angular-eslint/eslint-plugin-template": "^14.0.2",
    "@angular-eslint/schematics": "^14.0.2",
    "@angular-eslint/template-parser": "^14.0.2",
    "@angular/cli": "^14.1.2",
    "@angular/compiler-cli": "^14.1.2",
    "@babel/core": "^7.18.10",
    "@compodoc/compodoc": "^1.1.11",
    "@openapitools/openapi-generator-cli": "^2.3.0",
    "@types/d3": "^7.1.0",
    "@types/d3-org-chart": "^2.6.1",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~4.0.3",
    "@types/jest": "^28.1.6",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "^18.7.1",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.33.0",
    "@typescript-eslint/parser": "5.33.0",
    "babel-loader": "^8.2.5",
    "eslint": "^8.21.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsdoc": "^39.3.6",
    "eslint-plugin-no-unsanitized": "^4.0.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-rxjs": "^5.0.2",
    "eslint-plugin-rxjs-angular": "^2.0.0",
    "eslint-plugin-security": "^1.5.0",
    "husky": "^4.3.6",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~7.0.0",
    "jest": "^28.1.3",
    "jest-canvas-mock": "^2.4.0",
    "jest-junit": "^14.0.0",
    "jest-preset-angular": "^12.2.0",
    "lodash": "^4.17.21",
    "prepush-if-changed": "^1.0.8",
    "rimraf": "^3.0.2",
    "ts-jest": "^28.0.7",
    "ts-node": "~10.9.1",
    "typescript": "~4.7.4"
  }

Output from npm doctor

Check                    Value  Recommendation/Notes
npm ping                 ok
npm -v                   ok     current: v8.17.0, latest: v8.17.0
node -v                  ok     current: v16.16.0, recommended: v16.16.0
npm config get registry  ok     using default registry (https://registry.npmjs.org/)
which git                ok     C:\Users\RupertJ\AppData\Local\Programs\Git\cmd\git.EXE
Verify cache contents    ok     verified 45 tarballs

What did I do wrong? :(

ahnpnl commented 2 years ago

You are using @angular-builder/jest, which has a dependency on Jest 27.

spyro2000 commented 2 years ago

Hello @ahnpnl,

many thanks for your quick reaction. I am not super-experienced with npm, but does the message

npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/jest@14.0.0`

Not imply, that @angular-builders is referencing for any Jest version >= 28?

How could I resolve this? I tried to downgrade jest (+ types etc.) to v27, but now npm complains again:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular-builders/jest@14.0.0
npm ERR! Found: jest@27.5.1
npm ERR! node_modules/jest
npm ERR!   dev jest@"~27.5.1" from the root project
npm ERR!   peer jest@"^27.0.0" from ts-jest@27.1.5
npm ERR!   node_modules/ts-jest
npm ERR!     dev ts-jest@"^27.1.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/jest@14.0.0
npm ERR! node_modules/@angular-builders/jest
npm ERR!   dev @angular-builders/jest@"^14.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: jest@28.1.3
npm ERR! node_modules/jest
npm ERR!   peer jest@">=28" from @angular-builders/jest@14.0.0
npm ERR!   node_modules/@angular-builders/jest
npm ERR!     dev @angular-builders/jest@"^14.0.0" from the root project

Is there any working combination for Angular 14 which I should use?

ahnpnl commented 2 years ago

Hello @ahnpnl,

many thanks for your quick reaction. I am not super-experienced with npm, but does the message

npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=28" from @angular-builders/jest@14.0.0`

@angular-builders/jest@14.0.0 requires Jest 28 which you don't have in your package-lock.json. You need to upgrade to Jest 28.

henryruhs commented 2 years ago

Don't get me wrong but this is not stackoverflow. The issues has been resolved, if you have problems - this is not the right place.

spyro2000 commented 2 years ago

@ahnpnl, thank you. I thought, I did exactly that (upgrade to jest 28, see package.json). So, forget it for now, maybe it's a npm-internal problem, many thanks nevertheless.

Update: Got it resolved by manually deleting package-lock.json + node_modules. Now the IDE is the only remaining problem: https://bit.ly/3JR1pob :D