InlineSVG not shown in Jest Snapshot
uncenteredDiv opened this issue · comments
I added the package and replaced an in my component ... after running the Jest Test, which compares against a Snapshot, I don't see the ...
Here's my implementation:
<button>
<SVG src="/media/icon.svg" />
</button>
Here's the output of my Snapshot:
before
<button>
<img
alt="Search"
src="/media/icon.svg"
/>
</button>
after
<button>
</button>
Here's my test code:
it('should render svg without throwing an error', async () => {
const { container } = render(
<button>
<SVG src="/media/icon.svg" />
</button>
);
expect(container).toMatchSnapshot();
});
Any idea?
Could it be because of the source path?
I tried to add a external SVG source - but with no luck.
Ok, I found out that I need to add a delay
to wait until the Icon is loaded.
This is working for external Icons ...
For internal Icons I get the following
Error: Error: connect ECONNREFUSED 127.0.0.1:80
and
TypeError: Network request failed
Hello,
Yes, this library uses async requests to load URL files.
I don't know what you mean by internal icons, but if they are being loaded with an URL, the server must be running.
However, I usually mock this library for unit testing since I don't need to test the SVG loading, but only a placeholder for it.
Create a __mocks__
directory in your test directory and create a file named react-inlinesvg.jsx
inside it and add this content:
import React from 'react';
export default function ReactInlineSVG({ src }) {
return <svg id={src} />;
}
@gilbarbara
Thank you - thats exactly what I needed!
Do you know if its possible to add this ReactInlineSVG
Mock globally - so every usage of <SVG>
get's automatically mocked ...
That's what I meant with the __mocks__
directory setup...
https://jestjs.io/docs/en/manual-mocks
Dang - had in the wrong folder!
Now its working - thanks again!