ionic-team / ionic-team/ionic-framework

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

Đang mở
#29,889 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.