Jest运行测试时图片资源绝对导入出现解析报错

Jest 默认仅支持解析 JavaScript、TypeScript 类代码文件，没有内置对 .jpeg、.png 这类二进制静态资源的解析逻辑。测试运行时加载到导入了图片资源的业务代码（本例中为contacts.ts导入jpeg格式头像）时，Jest 会把图片的二进制内容当作 JS 代码解析，二进制内容不符合JS语法规则，直接抛出Invalid or unexpected token语法错误。

通过Jest的模块映射能力，将静态资源文件的导入替换为mock占位，无需Jest加载真实资源即可解决问题，操作步骤如下：

• 打开项目根目录的Jest配置文件（jest.config.js/jest.config.ts，若使用未eject的Create React App项目，可直接在package.json的jest字段下配置）
• 添加moduleNameMapper配置项，匹配所有图片后缀的导入请求，映射到本地mock文件，配置示例：

// jest.config.js
module.exports = {
  // 保留原有其他配置，如testEnvironment、transform规则等
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/src/__mocks__/fileMock.js"
  }
}

• 创建对应路径的mock文件src/__mocks__/fileMock.js，写入如下内容：

module.exports = "mock-image-stub";

配置完成后重新执行npm test即可正常运行测试。

注意：本例中使用了src/开头的绝对路径导入资源，需要同步在Jest的moduleNameMapper或moduleDirectories中添加对应路径别名映射，否则会触发模块找不到的报错。

单元测试场景下不需要加载真实图片二进制资源，mock占位完全可以覆盖组件渲染逻辑的验证需求，如果测试用例需要校验图片路径，可直接修改mock文件的返回值适配断言逻辑即可。

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