Image src displays as [object Object] #1
Description
Create React App allows you to import an svg like so:
import iconTrophy from '../images/icon-trophy.svg';
Which actually provides a string, which should be usable in an img tag, but rendering the html from react testing library displays this:
console.log
<body>
<div
data-testid="app-container"
>
<div
class="CardIconstyles__IconWrapper-sc-1oka3lh-0 izYIrF"
data-testid="Trophy"
>
<img
alt="Trophy"
class="CardIconstyles__IconImg-sc-1oka3lh-1 ipwWdi"
src="[object Object]"
/>
</div>
</div>
</body>
I think this is due to es modules. I have been able to get around this by adding
module.exports.__esModule = true; to the buildModule function.
I found this out from inspecting the CRA src code here:
https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/jest/fileTransform.js
With this line added the html output looks like this:
<img alt="Trophy" class="CardIconstyles__IconImg-sc-1oka3lh-1 ipwWdi" src="IconTrophy" />
It would be nice to fix this, and even better to use the filename as CRA does, so adding this:
module.exports.default = '${pathname}'; will result in a nicer src: <img alt="Trophy" class="CardIconstyles__IconImg-sc-1oka3lh-1 ipwWdi" src="icon-trophy.svg" />