ionic-team / ionicons

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
http://ionicons.com
MIT License
17.59k stars 2.07k forks source link

bug: IonIcon giving error with vitest #1316

Open asifrahman112 opened 10 months ago

asifrahman112 commented 10 months ago

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"/>

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

ionitron-bot[bot] commented 10 months ago

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

rdlabo commented 10 months ago

@asifrahman112 Is the path /image.svg correct? Angular copies everything under assets into the build file, so in most cases it should be /assets/image.svg or /assets/**/image.svg.

asifrahman112 commented 10 months ago

@asifrahman112 Is the path /image.svg correct? Angular copies everything under assets into the build file, so in most cases it should be /assets/image.svg or /assets/**/image.svg.

@rdlabo yes the path is correct...since its loading correctly in my project and I can access the image on that path. But the test fails with inavlid url message

rdlabo commented 10 months ago

@asifrahman112 Thanks reply. Now, try moving your SVG files under /assets. The error text in the image says it is looking in /assets.

Failed to parse URL from /assets/nozzle.svg

asifrahman112 commented 10 months ago

@rdlabo The image is already placed in assets folder in the root public directory

rdlabo commented 10 months ago

https://github.com/rdlabo/ionic-react-vite-src-icon/commit/2d48a704a6396765f73bd2ab225c1cc8ba43b618

@asifrahman112 I had mistakenly commented on some of the configurations. Please check the project that we have made which is displayed correctly. This project is based https://github.com/ionic-team/starters/tree/main/react-vite

liamdebeasi commented 10 months ago

@asifrahman112 Can you provide a GitHub repo with a minimal reproduction?

ionitron-bot[bot] commented 10 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

asifrahman112 commented 10 months ago

@rdlabo The image displays correctly in my project. Only the unit test fails on vitest with the error I have mentioned above

asifrahman112 commented 10 months ago

@liamdebeasi I have added the stackblitz url for the issue reproduction https://stackblitz.com/edit/ionic-react-vitest-example-qfvsxq?file=src%2Fcomponents%2FHeader.tsx

@liamdebeasi If you do npm run dev it works correctly, and the image is displayed properly but if you do npm run test it gives error

liamdebeasi commented 10 months ago

There's likely an issue with the asset path either not being defined or being defined incorrectly when loading the Ionicon. I'm going to move this over to the Ionicons repo so we can take a closer look.

sagarkm commented 10 months ago

I am facing the same issue in my project:

// Works when project runs and vitest passes as well // Works when project runs, but fails in vitest : TypeError: Invalid URL Important Update: When running the vitest in Node 16.60.0 there seems to be no issue - test runs succesfully. But when the same vitest is run in Node 18.18.0 the test fails with above issue.
sofi-algoritcom commented 8 months ago

I have the same problem. As @sagarkm mentioned above, the issue disappears when running the tests with node 16, it seems to be a problem with node 18. Any solution found to this? 🙏

lichblitz commented 6 months ago

The problem persists with node 20.