When using screen.debug() on a React component that has an img element-CodePudding

I am testing a React/Typescript component that has an image tag inside of it and wondering why, when running screen.debug(), the output shows the source being src="[object Object]".

Here is the component I am testing:

import { useState } from 'react'
import { InfoType } from '../../constants'

type Props = {
    type: InfoType
}

const HelpWidget = ({ type }: Props) => {
    const [isHover, setHover] = useState<boolean>(false)

    return (
        <div className="help-widget">
            <img
                role="image"
                src={require('../../../public/images/info.svg')}
                onm ouseEnter={() => setHover(true)}
                onm ouseOut={() => setHover(false)}
                onClick={() => setHover(!isHover)}
            />
            {isHover ? <div className="info">{type}</div> : <div role='hello'></div>}
        </div>
    )
}

export default HelpWidget

And here is the output I receive when running the test:

 <body>
      <div>
        <div
          
        >
          <img
            role="image"
            src="[object Object]"
          />
          <div
            role="hello"
          />
        </div>
      </div>
    </body>

I am assuming that it may have to do with the fact that the source attribute is a JS expression within JSX but not entirely sure that is the case.

CodePudding user response：

it's JavaScript's default behavior when serializing an object. Here is a much better answer to how/why this happens https://stackoverflow.com/a/25419538/3088146

If this only happens in the context of react-testing-library it could be because of a build tool used to build the app that properly resolves it to the string but does not in react-testing-library