ionic-framework
ionic-framework copied to clipboard
bug: App within ion-router-outlet not properly mounted with vue test-utils
Prerequisites
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] I have searched for existing 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 and this article .
Go to this repo to see an demo of my unit test. The behaviour when you run this test is the behaviour that I expect.
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.
. The issue persists because of this change of
vue
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
- Go to https://gitlab.com/julie41/demo-ionic-vue-router-unittest/-/tree/main
- Run the unit tests -> see logging, this is the expected behaviour
- 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!)
- 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