ionic-team / ionic-team/ionic-framework

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

Open
#29,889 0 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.