ionic-team / ionic-team/ionicons
bug: IonIcon giving error with vitest
- Vorherrschende Sprache
- TypeScript
- Sterne
- 18.2k
- Forks
- 2.1k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/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
v7.x
### Current Behavior
While running vitest on the components using IonIcon, the test is failing with following error though the image is rendered properly in the project
Using IonIcon as: ``
It works fine when using ion icon with with inbuilt icons provided by ionic but causes issues when we try to use any image url with it.
### Expected Behavior
The IonIcon should work with vitest properly when using image url with it.
### Steps to Reproduce
1. Create any react component in ionic framework.
2. Use IonIcon inside the component as using image path as src in IonIcon.
3. Run Vitest on the component
### Code Reproduction URL
https://stackblitz.com/edit/ionic-react-vitest-example-qfvsxq?file=src%2Fcomponents%2FHeader.tsx
Run the App: npm run dev
Run test suite: npm run test
### Ionic Info
Ionic:
"@ionic/react": "^7.0.10",
"@ionic/react-router": "^7.3.1"
vite:
"vite": "4.3.9",
"vite-plugin-dts": "2.3.0",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.0.2",
"vitest": "0.32.0"
### Additional Information
_No response_
Beitragsleitfaden
Rechercherichtung
Start with src/components/Header.tsx in the linked StackBlitz reproduction and run its npm test command to observe the IonIcon failure with an external image URL. Trace the behavior in the ionicons package and verify completion by making the Vitest suite pass while the image URL still renders correctly.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript, vite
- Bereich
- frontend, testing
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100