[Bug]: Angular Material tests using Harness fail with Expected to be running in 'ProxyZone', but it was not found.

[npen]

Version

10.0.1

Steps to reproduce

Hi,

I'm facing an issue using Angular Material harnesses for testing components. I started from scratch a new project following carefully the installation instruction but this error stil happens:
Expected to be running in 'ProxyZone', but it was not found.

1. Clone repo https://git.sr.ht/~npen/jest-angular-material-harness

2. run npm i

3. npm test (using Karma works ok)

4. npm run test-jest gives the following error

   Expected to be running in 'ProxyZone', but it was not found.

This is the test failing: https://git.sr.ht/~npen/jest-angular-material-harness/tree/main/item/src/app/button-page/button-page.component.spec.ts

It's a very basic test using Angular Material Harnesses

Expected behavior

The test should be working

Actual behavior

The test fails with the error
Expected to be running in 'ProxyZone', but it was not found.

Additional context

No response

Environment

System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
  Binaries:
    Node: 14.18.0 - /usr/bin/node
    npm: 6.14.15 - /usr/bin/npm
  npmPackages:
    jest: ^27.2.4 => 27.2.4

[ahnpnl]

Hi, the issue is caused by zone patch for jest. You can use workaround https://stackoverflow.com/questions/63235895/angular-material-jasmine-testing-errors-while-loading-material-harnesses (I use Option 1 which replaces async with waitForAsync in beforeEach)

@JiaLiPassion would you please take a look at this? I think this is something should be fixed from zone.js side.

[JiaLiPassion]

@ahnpnl , sure, I will check it.

[JiaLiPassion]

The issue is described here angular/components#21632, so the walkaround will be update the target in the tsconfig.json to es2016, now Angular CLI supports es2017 and only transpile async/await code to Promise, I believe it also should supports the test code, I will take another look.

[ahnpnl]

thanks a lot! Indeed if I switch target to either es2016 or es2015 it works fine. Users still can use es2017 if they use waitForAsync to create Material loader though.

[JiaLiPassion]

sure, using waitForAsync will resolve this issue, but if you are using async/await in your test code, there is still a chance your test will fail because the code after await will fall into the wrong zone. So I think a better walk around will be add the target: es2016 to tsconfig.sepc.json, so you can still compile your code in es2017 for the build operation.