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 - Did you run and wait for 'resolveComponentResources()' #1617

Closed just-jeb closed 2 years ago

just-jeb commented 2 years ago

Version

12.1.0

Steps to reproduce

  1. Clone my repo git@github.com:just-jeb/angular-builders.git
  2. Checkout branch 14.x.x-update-jest
  3. Run yarn --forzen-lockfile
  4. cd examples/jest/simple-app
  5. Run yarn jest
  6. See the error.

Expected behavior

The tests pass

Actual behavior

The tests fail

Additional context

I'm facing this issue while trying to update @angular-builders/jest to the latest Jest and jest-preset-angular versions.
At first I was convinced something is wrong with the builder, so I did multiple attempts to try and fix it.
However, after creating a simple jest.config just as described in the docs of jest-preset-angular I realized that even without the builder it fails with the same error.

So either the docs are missing an important piece of information or the preset is not working properly with Angular 14.

Environment

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.15.0 - ~/Library/Caches/fnm_multishells/76263_1654430796992/bin/node
    Yarn: 1.22.18 - ~/Library/Caches/fnm_multishells/76263_1654430796992/bin/yarn
    npm: 8.8.0 - ~/Library/Caches/fnm_multishells/76263_1654430796992/bin/npm
yarn why v1.22.18
[1/4] 🤔  Why do we have the module "jest"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "jest@28.1.0"
info Has been hoisted to "jest"
info Reasons this module exists
   - "workspace-aggregator-cc77ab8d-cc83-426b-9070-0a3250032b31" depends on it
   - Specified in "devDependencies"
   - Hoisted from "_project_#multiple-apps#jest"
   - Hoisted from "_project_#simple-app#jest"
   - Hoisted from "_project_#jest"
   - Hoisted from "_project_#@angular-builders#custom-webpack#jest"
   - Hoisted from "_project_#@angular-builders#jest#jest"
   - Hoisted from "_project_#@angular-builders#timestamp#jest"
info Disk size without dependencies: "48KB"
info Disk size with unique dependencies: "1.06MB"
info Disk size with transitive dependencies: "48KB"
info Number of shared dependencies: 164
ahnpnl commented 2 years ago

The error is about the AST transformers are not applied. Not sure why this happens while it doesn't happen to https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v14

just-jeb commented 2 years ago

I'd guess it has something to do with monorepo setup and Yarn workspaces, but you're the expert 😅

ahnpnl commented 2 years ago

When I compare between master and reproduce branch, I saw a slight change in package.json with jest configuration. The change isn’t in master, could it be the case?

We have example for yarn workspace at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-yarn-workspace which don’t have the issue. Maybe you can take a look to see.

I believe this is something with workspace configuration which is sort of out of scope to handle.

just-jeb commented 2 years ago

The change in package.json was in order to use jest-preset-angular directly, without the builder, to eliminate the possibility of a bug in the builder. Other than that it's just a regular Yarn workspace. I'll try to figure out what happens, but my fear is that the issue is wider than just my particular monorepo. Let's wait and see if there are more complaints before closing it here.

just-jeb commented 2 years ago

We have example for yarn workspace at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-yarn-workspace which don’t have the issue. Maybe you can take a look to see.

@ahnpnl The example app in the monorepo uses Angular 13 so I can't fairly compare this setup to mine.

just-jeb commented 2 years ago

Update: Issue is solved on my side, the problem was some mysterious relations between peerDeps and devDeps causing Yarn to not hoist some dependencies that should have been hoisted.
I see that currently I'm the only one who experienced this issue so I'm closing it.
Thanks for the help and sorry for the mess 😄

ahnpnl commented 2 years ago

Thanks for the updating!

GeorgeTailor commented 2 years ago

@just-jeb you're not the only one with this problem. Can you share what exactly were your steps to resolve this issue? I'm using 

"@angular-builders/jest": "14.0.1",
"jest": "28.1.3",
"jest-preset-angular": "12.2.0",
just-jeb commented 2 years ago

As I mentioned, it was a dependency hell, try to make sure that you don't have some weird hierarchy or non-hoisted modules in case of monorepo.
Also, you don't need an explicit dependency on the preset, the builder brings it for you.

MatthewAlner commented 2 years ago

tl;dr Use Typescript < 4.8

@GeorgeTailor I had the same issue as you with exactly the same deps.

"@angular-builders/jest": "14.0.1"
"jest": "28.1.3"
"jest-preset-angular": "12.2.0" via "@angular-builders/jest": "14.0.1"

Turns out the issue was ng upgrade upped my typescript from 4.5.4 to 4.8.4 and there is a breaking change in 4.8 as @ahnpnl mentions here that causes the same error message.

Weird thing is that if you ng new an Angular 14 project you get "typescript": "~4.7.2" so I downgraded to that and all is well.

vikas112dubey commented 1 year ago

tl;dr Use Typescript < 4.8

@GeorgeTailor I had the same issue as you with exactly the same deps.

"@angular-builders/jest": "14.0.1"
"jest": "28.1.3"
"jest-preset-angular": "12.2.0" via "@angular-builders/jest": "14.0.1"

Turns out the issue was ng upgrade upped my typescript from 4.5.4 to 4.8.4 and there is a breaking change in 4.8 as @ahnpnl mentions here that causes the same error message.

Weird thing is that if you ng new an Angular 14 project you get "typescript": "~4.7.2" so I downgraded to that and all is well.

I had the exact same issue, and the root cause is the same what you have mentioned. I downgraded the typescript version from 4.8.4 to 4.7.2 and it worked.

kcruijss commented 1 year ago

I had the same issue after updating to Angular 15, which supports TypeScript 4.8 or higher. Because I didn't want to downgrade my TypeScript to 4.7 (which is mentioned as workaround in the comment above) just so I could test Components in Jest (in fact, I've updated my TS 4.8 it to 4.9.5 instead), I've tried to see if anything else was causing an issue.

The version combinations I was using that gave me the same error:

Updating Jest itself to 29.4.1 (current latest) fixed the issue for me. Not sure what changed since 28.1.1 that caused the issue, but this did the trick for me. I'm just leaving this here in case anyone else is experiencing the same issue.

It seems juggling with the versions of jest, jest-preset-angular, and typescript is required when encountering this issue. Hopefully a minor/major version update of any of these three dependencies won't cause the same issue again in the future, but I'm glad it's at least working for me now with the current latest versions for all three.