Unit test fails with zone application and vitest

[chabb]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello Angular Team,

ng version: 21.1.5

Unit tests fail in a very weird way for projects that use the zone
Some fields of the components are simply not assigned, which causes a failure when the view is rendered
Strangely, this happens when multiples components consumes the same import ( this typically happens with exported constants )

You can find a simple repro below.

https://stackblitz.com/edit/angular-v21-starter-w7aywxrw?file=README.md

If I remove the polyfill, it passes ( I've noticed that the generated javascript is different )

Please not that we cannot migrate all our apps/libs to zoneless in one shot ( we are in an enterprise setup with a lot of libs ),
so it's really an issue that prevent us for migrating to ng21

Thanks for considering this issue,

FC

Minimal Reproduction

https://stackblitz.com/edit/angular-v21-starter-w7aywxrw?file=README.md

Exception or Error

Some fields of the component is undefined, which causes failure when the template is rendered during the test.



TypeError: Cannot read properties of undefined (reading 'A')

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.1.5
Angular           : 21.1.5
Node.js           : 20.19.1
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.1.5            │ ^21.1.5           │
│ @angular/cli              │ 21.1.5            │ ^21.1.5           │
│ @angular/common           │ 21.1.5            │ ^21.1.5           │
│ @angular/compiler         │ 21.1.5            │ ^21.1.5           │
│ @angular/compiler-cli     │ 21.1.5            │ ^21.1.5           │
│ @angular/core             │ 21.1.5            │ ^21.1.5           │
│ @angular/forms            │ 21.1.5            │ ^21.1.5           │
│ @angular/platform-browser │ 21.1.5            │ ^21.1.5           │
│ @angular/router           │ 21.1.5            │ ^21.1.5           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.18            │ ^4.0.8            │
│ zone.js                   │ 0.15.1            │ ~0.15.0           │
└───────────────────────────┴───────────────────┴──────────────────

Anything else relevant?

Removing the polyfill fixes it.

Tweaking the tsconfig.spec.json to use node module system fixes it ( see in the stackblitz )

[JeanMeche]

I chatted with @chabb.

There is a race condition at play here. Here is what we found:

• dropping all async/await the test passes (code isn't downleveled anymore)
• hooking up the debugger, the test passes correctly (even with async/await
• test run fine in browser mode

[chabb]

This looks like some kind of race condition, you can see the generate JS in the image below.
I've put a breakpoint, and it turns out than the TEST variable ( which is assigned to a field of the component and points to an export of a module ) is actually undefined. But the module itself has the right value, so I guess it has been defined at a later time