InlineSVG not shown in Jest Snapshot

[Manuel Lieb]

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?

[Manuel Lieb]

I tried to add a external SVG source - but with no luck.

[Manuel Lieb]

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

[Gil Barbara]

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} />;
}

[Manuel Lieb]

@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 ...

[Gil Barbara]

That's what I meant with the __mocks__ directory setup...
https://jestjs.io/docs/en/manual-mocks

[Manuel Lieb]

Dang - had in the wrong folder!
Now its working - thanks again!