New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: IonIcon giving error with vitest #1316
Comments
Thanks for the issue! This issue has been labeled as |
@asifrahman112 Is the path |
@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 |
@asifrahman112 Thanks reply. Now, try moving your SVG files under
|
@rdlabo The image is already placed in assets folder in the root public directory |
rdlabo/ionic-react-vite-src-icon@2d48a70 @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 |
@asifrahman112 Can you provide a GitHub repo with a minimal reproduction? |
Thanks for the issue! This issue has been labeled as 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. |
@rdlabo The image displays correctly in my project. Only the unit test fails on vitest with the error I have mentioned above |
@liamdebeasi I have added the stackblitz url for the issue reproduction @liamdebeasi If you do |
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. |
I am facing the same issue in my project: Important Update: |
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? 🙏 |
The problem persists with node 20. |
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
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
The text was updated successfully, but these errors were encountered: