React/TS组件测试调用screen.debug()时img src显示[object Object]

测试React/TypeScript图片组件时，执行screen.debug()发现渲染输出中img标签的src属性值为[object Object]，无法定位故障原因。

被测组件代码 #

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')}
                onMouseEnter={() => setHover(true)}
                onMouseOut={() => setHover(false)}
                onClick={() => setHover(!isHover)}
            />
            {isHover ? <div className="info">{type}</div> : <div role='hello'></div>}
        </div>
    )
}

export default HelpWidget

测试异常输出 #

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

你之前猜测问题和JSX传入JavaScript表达式有关的判断不准确，JSX属性中传入合法JS表达式本身是符合语法规范的，核心问题是：

你传给src属性的require('../../../public/images/info.svg')返回值不是图片路径字符串，而是一个JavaScript对象。对象被直接赋值给src属性时，会自动执行toString()转换，最终输出就是[object Object]。

出现这个情况通常有两种场景：

• 项目构建配置了SVG组件化加载规则（比如使用@svgr/webpack类loader），这种配置下require引入svg文件的返回值是一个React组件对象，而非资源路径字符串。
• 测试环境（比如Jest）的静态资源mock规则配置错误，将svg、图片类文件mock成了对象返回，而非字符串形式的资源占位符。

• 如果你需要将svg作为普通图片资源引用，取require返回值的default字段获取实际路径：

  src={require('../../../public/images/info.svg').default}
  

  如果是Vite搭建的项目，public目录下的资源可以直接通过根路径引用，不需要使用require：

  src="/images/info.svg"
  

• 检查测试环境的静态资源mock配置，以Jest为例，需要将图片、svg类文件的mock返回值设置为字符串。可以先在jest.config.js中添加模块映射规则：

  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js'
  }
  

  再新建对应的__mocks__/fileMock.js文件，写入如下内容即可：

  module.exports = 'test-file-stub';
  

• 修复前可以先打印require的返回值确认结构，确保最终传给src属性的是字符串类型的资源路径，不要直接传入对象。

内容的提问来源于stack exchange，提问作者AAMCODE