ionic-team/ionicons

bug: IonIcon giving error with vitest

Open

#1316 opened on Jan 4, 2024

View on GitHub
 (15 comments) (0 reactions) (0 assignees)TypeScript (17,256 stars) (2,083 forks)batch import
help wanted

Description

Prerequisites

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: <IonIcon src="/assets/nozzle.svg"/>

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

Contributor guide

Tech stack
typescriptreactvitest
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactVitestIonic Framework
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the IonIcon component implementation in the ionicons repository, particularly the handling of the src prop. Look into how vitest handles loading SVG files and whether a mock or polyfill is needed. Check the comments in the issue for any suggested solutions or workarounds. Consider modifying the IonIcon component or providing a test helper.