ionic-team / ionic-team/ionic-framework

bug: App within ion-router-outlet not properly mounted with vue test-utils

Aperta
#29,889 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
triage
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

I have implemented the Vue ionic router in my unit test to test the logic within the ionic lifecycle hook in my Vue component. My tests are inspired by the unit tests from this repository: [ packages/vue/test-app/tests/unit/lifecycle.spec.ts ](https://github.com/ionic-team/ionic-framework/blob/b010f077fe51992dd9dd8ced69769a8eb91ac055/packages/vue/test-app/tests/unit/lifecycle.spec.ts) and [this article ](https://forum.ionicframework.com/t/how-to-unit-test-onionviewwillenter-or-any-ionic-specific-hooks/221917).

[Go to this repo to see an demo of my unit test](https://gitlab.com/julie41/demo-ionic-vue-router-unittest/-/blob/main/tests/unit/views/Home.spec.ts). The behaviour when you run this test is the behaviour that I expect.
![image](https://github.com/user-attachments/assets/45dfec89-eaf5-4c02-90b5-507b7dbdce60)

Then go to the package.json and update the vue version from `3.3.9` to `3.3.10` and run `npm i`. When you rerun the tests, they don't behave as expected anymore. The issue is that the second time the test runs, the `ion-router-outlet` is empty, and the lifecycle hook is not triggered.
![image](https://github.com/user-attachments/assets/05f34e93-3cba-4a9e-b101-766d5a30ea2a). The issue persists because [of this change of `vue` ](https://github.com/vuejs/core/commit/ec715854ca12520b2afc9e9b3981cbae05ae5206#diff-53baa390cbb0872ba29c9041efb851643b5f31c9e3e050ee7c4244b3905e4273R15)

I started looking into the repository of ionic/vue to see how you solved this issue, but I noticed that you are still on vue `3.2.47` https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/package.json

Can you update the vue version in this package and ensure the vue ionic router outlet keeps working as expected with this caching update of vue?

### Expected Behavior

I expect the `onIonViewDidEnter` lifecycle hook of the 2nd test to get triggered when upgrading to vue 3.3.10 or higher.

### Steps to Reproduce

1. Go to https://gitlab.com/julie41/demo-ionic-vue-router-unittest/-/tree/main
2. Run the unit tests -> see logging, this is the expected behaviour
3. Go to package json https://gitlab.com/julie41/demo-ionic-vue-router-unittest/-/blob/main/package.json and update vue to 3.3.10 (or later!)
4. Run the unit tests again -> see logging, this is unexpected behaviour. The ion router outlet is not mounting the component attached to the current route.

### Code Reproduction URL

https://gitlab.com/julie41/demo-ionic-vue-router-unittest/-/tree/main

### Ionic Info

WARN] Error loading @capacitor/core package.json: Error: Cannot find module '@capacitor/core/package.json'

Require stack:
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

Require stack:
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

Require stack:
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/lib/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/index.js
- /Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/Users/julieteeuwen/.nvm/versions/node/v20.17.0/lib/node_modules/@ionic/cli)

Capacitor:

Capacitor CLI : not installed
@capacitor/android : not installed
@capacitor/core : not installed
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.17.0 (/Users/julieteeuwen/.nvm/versions/node/v20.17.0/bin/node)
npm : 10.8.2
OS : macOS Unknown

### Additional Information

_No response_

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with packages/vue/package.json and the lifecycle example in packages/vue/test-app/tests/unit/lifecycle.spec.ts, then run the linked reproduction with Vue 3.3.10 or later. Trace how ion-router-outlet mounts and caches the routed component during the repeated tests. Done means the second test mounts its current route and triggers onIonViewDidEnter as expected.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, typescript
Ambito
frontend, testing-qa
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.