ionic-team / ionic-team/ionicons

bug: IonIcon giving error with vitest

オープン
#1,316 コメント 15 件 リアクション 0 件 担当者 0 名 GitHub で見る
help wanted
主要言語
TypeScript
スター
18.2k
フォーク
2.1k
PR マージ指標
30日以内にマージされた PR はありません

説明

### 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: ``
error

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_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript, vite
領域
frontend, testing
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。