src prop warning in unit testing react testing library

[Avi Cohen Nehemia]

I'm displaying an svg by passing a src using an import and everything works ok. Here is a simplification of my code:

import Logo from '../../assets/images/logo.svg';

const Example = () => {
  ...some code

  return (
    <ReactSVG
      data-testid="export-logo"
      src={Logo}
    />
  );
};

However, in my unit tests (using react testing library) I get a console.error with the meesage:
Warning: Failed prop type: The prop `src` is marked as required in `ReactSVG`, but its value is `undefined`.
The debug output shows the following:

<div data-testid="export-logo">
  <div>
    <div data-src="undefined" src="" />
  </div>
</div>

I tried looking in past issues for a solution or maybe if I need to do some sort of mocking but couldn't find a reference to this problem except on this stackoverflow question from 2 years ago which remains unanswered.

Would appreciate any help,
cheers 🙏🏼

[Tane Morgan]

Hi @Avi-Cohen-Nehemia. That import looks interesting - src expects a string, it uses that to make an XHR request for the SVG under the hood.

If you're looking for ways to mock those XHR requests, there are examples in this library that you may find useful, e.g. browser-spec.tsx.

[Tane Morgan]

Closing due to inactivity, feel free to comment if you'd like it re-opened 🙏