Jest搭配Parcel时无法识别本地图片导入语法致测试报错如何解决

两类报错的核心原因都是Jest未适配非JS/TS类的静态资源处理逻辑：

• Jest默认会把所有导入的文件按JavaScript语法解析执行，遇到PNG、GIF这类二进制图片文件时，会直接把文件二进制内容当成JS代码读，开头的�PNG是PNG文件的固定二进制头，被当成JS代码解析自然会抛出「遇到意外令牌」错误。
• Parcel特有的url:前缀导入规则、.parcelrc里的自定义资源解析配置仅对Parcel构建流程生效，Jest不会读取这部分配置，所以直接在代码里用url:前缀导入跑测试时会提示无法解析模块路径。

按以下步骤配置即可解决所有相关报错：

• 新增Jest静态资源映射规则
  打开项目的Jest配置文件（支持jest.config.js/jest.config.ts/package.json内的jest字段三种形式），添加moduleNameMapper配置：

  // jest.config.js 示例
  module.exports = {
    // 保留你已有的其他Jest配置，比如测试环境、转译规则等
    moduleNameMapper: {
      // 匹配所有常见图片格式的导入，映射到mock文件
      "\\.(gif|png|jpg|jpeg|svg|webp)$": "<rootDir>/__mocks__/fileMock.js",
      // 兼容Parcel的url:前缀导入规则，去掉前缀后走正常路径解析
      "^url:(.*)$": "$1"
    }
  }
  

• 创建静态资源mock文件
  在项目根目录新建__mocks__文件夹，在文件夹内新建fileMock.js，写入以下内容：

  module.exports = "mock-file-path";
  

  配置生效后，Jest执行测试时遇到所有图片类资源导入，都会直接返回这个固定字符串代替真实的文件二进制内容，不会再尝试解析图片本身。
• （TypeScript项目可选）补充类型声明
  如果项目使用TypeScript，为了避免url:前缀导入触发TS类型报错，可以在项目全局类型声明文件（比如global.d.ts）中添加以下声明：

  declare module 'url:*' {
    const src: string;
    export default src;
  }
  

• 配置完成后，不管是用require()引入图片、普通import引入图片，还是用Parcel的url:前缀语法引入图片，Jest测试都可以正常执行，mock返回的字符串不会影响组件渲染、逻辑判断相关的测试。
• 不需要为了适配Jest修改业务代码里的静态资源引入方式，Parcel构建时依旧会按原有规则处理静态资源，两类配置互不干扰。

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