[Bug]: Angular 14 - Did you run and wait for 'resolveComponentResources()'

[just-jeb]

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]

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]

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

[ahnpnl]

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]

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]

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]

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]

Thanks for the updating!

[GeorgeTailor]

@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]

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]

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]

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]

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:

• angular: 15.0.4
• jest: 28.1.1
• jest-preset-angular: 12.2.6 (current latest)
• typescript: 4.9.5 (current latest)

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.