TypeError: convert is not a function in testing-library `render`
elramus opened this issue · comments
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
![Screenshot 2023-12-14 at 10 52 18 AM](https://private-user-images.githubusercontent.com/24811404/290592231-e5d6628a-3840-4921-9085-6c2e8b527dcb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1OTcwNDYsIm5iZiI6MTcxOTU5Njc0NiwicGF0aCI6Ii8yNDgxMTQwNC8yOTA1OTIyMzEtZTVkNjYyOGEtMzg0MC00OTIxLTkwODUtNmMyZThiNTI3ZGNiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDE3NDU0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRlODI4NDk5YmVhYzdhODg4N2QxOTE2MjNmOGQ1ZGNhMWZkYmE1ZWI2YzdkZDE3M2M5ODUwZmMzZGU1Mjc0M2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.jntik9r26LkPGOeLbUU7EETRL9_zGVnk600f03HVSUA)
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
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.
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.
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.