[Bug]: Svg Icon can not load If use react-svg and storybook-addon-mock

[linhhuynhcamis]

Describe the bug

I use react-svg to load svg icon from public folder. When I run project, the svg icon will be showed normally. But when I run storybook. Svg Icon cannot load on storybook. I will check two cases:

• If I use img tag instead of using react-svg library. Icon show.
• If I remove storybook-addon-mock from addons in main.js, Icon show.

To Reproduce

No response

System

No response

Additional context

No response

[imf]

I have this problem too!

[hwangar]

Hey guys, I've been struggling on this one as well and these are my findings: TLDR; SADLY, it won't work...

from https://github.com/berniegp/mock-xmlhttprequest/blob/main/src/MockXhr.ts comments you can see:

Partial support:

• • overrideMimeType(): throws when required, but has no other effect.
• • responseType: '', 'text' and 'json' are fully supported. The responseType values have no
• effect on the response body passed to setResponseBody().
• • responseXml: the response body is not converted to a document response. To get a document response, pass it directly as the response body in setResponseBody().
• • responseUrl: the final request URL after redirects isn't automatically set. This can be
• emulated in a request handler.

which are the ones used by react-svg... so it won't get the expected xml document at all :(, not but a limitation in storybook-rest-mock, but in it's inner dep implementation, same as other's use cases using these unsupported responseXml

My 2 cents: I decided to mock library to drop support of XMLHttpRequest mocking at all and stay with just fetch mocking as it was what I needed and the XMLHttpRequest alternative is "partially supported"