TypeError: convert is not a function in testing-library `render`

[Luke Ramus]

Describe the bug

When rendering the SVG component in a render function from testing-library/react, the SVG does not render and its onError function fires, saying:

TypeError: convert is not a function
    at getNode (file:///Users/dramus/Sites/svg-test/node_modules/react-inlinesvg/src/modules/utils.ts:28:18)

Your minimal, reproducible example

Can't make sandbox cause it happens when running tests via command line

Steps to reproduce

Not quite sure how to put this into a sandbox since it happens when running a test via command line, but you can reproduce by creating a new, clean Vite React TS project, adding vitest and react testing library, and making a simple test to try and render it.

import SVG from 'react-inlinesvg'

import { render, screen } from '@testing-library/react'

describe('Svg', async () => {
  it('renders in a test', async () => {
    render(
      <SVG
        src="<svg>test</svg>"
        onError={(e) => {
          console.log(e)
        }}
      />
    )

    await screen.findByText('test')
  })
})

Expected behavior

Render the SVG the same as it does when not testing

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Mac OS, Sanoma 14.2, M2 chip

react-inlinesvg version

4.1.0

TypeScript version

5.2.2

Build tool

Vite

Additional context

No response

[Gil Barbara]

Hey @elramus
The convert function comes from the react-from-dom package, make sure it's installed.

Are you using jest or vitest?
Maybe the test runner is confused about the default export. Try setting downlevelIteration or esModuleInterop in a tsconfig inside your tests directory.

[Luke Ramus]

Thanks for the fast response @gilbarbara. I did verify that react-from-dom is there in the node modules folder. We're using Vitest, and esModuleInterop is already set to true. Just tried downlevelIteration, didn't seem to change anything.

For some additional context, up until now we've been on Create React App 4, React 17, and react-inlinesvg 2.2.2, with vitest for test runner. We're in the process of switching over to Vite + React 18. Would like to do latest react-inlinesvg as well, but this issue is blocking that part at the moment. Version 2.2.2 continues to work fine in the new Vite + React 18.

[Gil Barbara]

But aside from the tests, does the latest version work with your app?
If so, this isn't a bug with the library but some problem with your test setup.

Can you try to edit the node_modules/react-inlinesvg/src/modules/utils.ts and log the convert import to see what's happening?
Anyway, you can create a devbox in codesandbox that uses containers and you can run commands in the terminal.