Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image src displays as [object Object] #1

Open
ChromeQ opened this issue Mar 24, 2022 · 3 comments · May be fixed by #2
Open

Image src displays as [object Object] #1

ChromeQ opened this issue Mar 24, 2022 · 3 comments · May be fixed by #2

Comments

@ChromeQ
Copy link

ChromeQ commented Mar 24, 2022

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" />
@ChromeQ ChromeQ linked a pull request Mar 24, 2022 that will close this issue
Open
@garvae
Copy link

garvae commented Aug 11, 2022

Still having this issue

@ChromeQ
Copy link
Author

ChromeQ commented Aug 11, 2022

@garvae I'd recommend using patch-package to add the lines from my PR linked above.
That's what I do and works perfectly until the owner updates the package or merges my PR

@garvae
Copy link

garvae commented Aug 11, 2022

@ChromeQ Man, you're just amazing. It really works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Export as esModule ChromeQ/svg-jest
2 participants
@ChromeQ @garvae