Skip to content

bug(aria/listbox): Error in tests when using Listbox as a HostDirective (Cannot access 'ComboboxPopup' before initialization) #32408

@makmn1

Description

@makmn1

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

An error occurs when trying to test a component which uses Listbox as a host directive

Note: This problem only occurs when running tests in Angular v21 with ng test. There are no errors when running ng serve and the component works with Listbox as expected.

Reproduction

Minimal reproduction repo: https://github.com/makmn1/angular-aria-listbox-initialization-bug

I could not reproduce my issue on StackBlitz because there are issues with running tests in StackBlitz with JSDOM. I was getting the following error when running ng test after upgrading to Angular v21 (the default in StackBlitz is 20):

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Object.defineProperty called on non-object
 ❯ _0x1b8008 ../../../blitz.cf284e50.js:31:858920
 ❯ Object.createContext ../../../builtins.97a3df4f.js:322:3356
 ❯ exports.createWindow node_modules/jsdom/lib/jsdom/browser/Window.js#cjs:82:17
 ❯ new JSDOM node_modules/jsdom/lib/api.js#cjs:36:20
 ❯ Object.setup node_modules/vitest/dist/chunks/index.BspFP3mn.js:526:15
 ❯ Object.setupEnvironment [as setup] node_modules/vitest/dist/chunks/base.BEv8sRbK.js:140:14
 ❯ _0xf8839a.onMessage node_modules/vitest/dist/chunks/init.a5SCIJ0x.js:199:23

Expected Behavior

The ability to test a component that has Listbox as a hostDirective

Actual Behavior

Adding the Listbox directive to the hostDirectives list for a component and then running ng test in an Angular v21 project using Vitest + JSDOM results in the following error:

ReferenceError: Cannot access 'ComboboxPopup' before initialization
 ❯ Combobox.<static_initializer> node_modules/@angular/aria/fesm2022/combobox.mjs:147:18
 ❯ node_modules/@angular/aria/fesm2022/combobox.mjs:1:1
 ❯ src/app/listbox-host/listbox-host.component.ts:2:1

That's from the reproduction link above. In my project which uses Vitest with Playwright instead of JSDOM, I got a vague error:

Error: Failed to import test file C:/Users/makmn/IdeaProjects/simply-material/simply-material/projects/components/src/lib/buttons/button-group/button-group-selection.spec.ts
Caused by: TypeError: Cannot read properties of undefined (reading 'directive')
 ❯ <static_initializer> spec-button-group-selection.js:845:42

Environment

Item Version
Angular CLI 21.0.0
Angular 21.0.1
Node.js 24.11.0
Package Manager npm 11.6.1
Operating System win32 x64
Package Installed Version Requested Version
@angular/aria 21.0.0 ^21.0.0
@angular/build 21.0.0 ^21.0.0
@angular/cli 21.0.0 ^21.0.0
@angular/common 21.0.1 ^21.0.0
@angular/compiler 21.0.1 ^21.0.0
@angular/compiler-cli 21.0.1 ^21.0.0
@angular/core 21.0.1 ^21.0.0
@angular/forms 21.0.1 ^21.0.0
@angular/platform-browser 21.0.1 ^21.0.0
@angular/platform-server 21.0.1 ^21.0.0
@angular/router 21.0.1 ^21.0.0
@angular/ssr 21.0.0 ^21.0.0
rxjs 7.8.2 ~7.8.0
typescript 5.9.3 ~5.9.2
vitest 4.0.14 ^4.0.8

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaround

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions