bug: $instanceValue$ undefined in unit tests with ion-item

[RasmusKjeldgaard]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When running unit tests with any Angular-component that has an ion-item in its template, I am seeing TypeError: Cannot read properties of undefined (reading '$instanceValues$').

The issue only occurs if the currently newest version of @stencil/core (v4.23.2) is installed. That version is only possible to install with Ionic Angular v8.2.9 or lower, because this PR (released in v8.3.0) pins the stencil dependency to v4.20.0 for unrelated reasons.

The issue therefore currently surfaces for version v8.2.9 and below, and I suspect this issue will re-surface in a future version once the version pinning is relaxed again.

Expected Behavior

I expect no errors to be thrown by the component under test.

Steps to Reproduce

Following steps was reproduced here: https://github.com/RasmusKjeldgaard/item-instance-value-repro

1. Create a blank starter app with @ionic/angular@8.2.9 and @stencil/core@4.23.2
2. Replace the app component template contents with <ion-item></ion-item>.
3. Edit the spec file to run multiple tests, e.g. repeat expect(app).toBeTruthy(); 5-10 times.
   a. Important: I can only reproduce the error when a test suite contains multiple tests running after each other.
4. run npm run test and see test succeeding, but often multiple TypeError: Cannot read properties of undefined (reading '$instanceValues$') will be thrown.
5. If no errors are observed, try re-running the tests.

Code Reproduction URL

https://github.com/RasmusKjeldgaard/item-instance-value-repro

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/angular 8.2.7
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 12.1.1

Additional Information

No response

[HansKrywalsky]

Looks like this is an stencil issue - Any updates on this from the team? We experience the same on version 4.25.2. Downgrade to 4.23.1 works, so looks like it broke in 4.23.2

[christian-bromann]

@HansKrywalsky @RasmusKjeldgaard after upgrading to @stencil/core@4.29.0 I am not seeing any errors:

❯ npm test

> item-instance-value-repro@0.0.1 test
> ng test

✔ Browser application bundle generation complete.
03 04 2025 13:18:35.125:WARN [karma]: No captured browser, open http://localhost:9876/
03 04 2025 13:18:35.136:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
03 04 2025 13:18:35.136:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
03 04 2025 13:18:35.138:INFO [launcher]: Starting browser Chrome
03 04 2025 13:18:36.055:INFO [Chrome 134.0.0.0 (Mac OS 10.15.7)]: Connected on socket HqGxJZh6xQ_7uuTrAAAB with id 77146705
Chrome 134.0.0.0 (Mac OS 10.15.7): Executed 10 of 10 SUCCESS (0.043 secs / 0.032 secs)

Can someone verify?

[HansKrywalsky]

Looks good for me, cant reproduce the error with 4.29.0 👍🏼

[RasmusKjeldgaard]

Same here, seems to be fixed 🎉 I'll close this issue.