Jest无法解析图片文件，配置mock与transformer均报错如何解决？

问题原因分析 #

你遇到的两个问题都是Next.js环境和高版本Jest的适配问题，和Jest官方基础教程的普通React环境场景有差异：

1. next/image 组件对 src 属性有严格的格式校验，要求必须是合法URL路径或静态资源导入对象，普通字符串test-file-stub不符合校验规则，所以触发解析错误
2. 你写的transform配置存在语法错误，且高版本Jest对transform导出格式有特定要求，所以会抛出导出错误

优先方案（Mock方案适配） #

不用修改现有mock规则，只需要做任意一项调整即可解决：

方案1：Mock next/image组件（更彻底，推荐）

在你的jest.setup.ts中添加如下代码，直接把Next的图片组件替换为原生img标签，绕过src校验：

import React from 'react';

jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: any) => {
    // 把next/image的属性映射到原生img上
    return <img {...props} src={typeof props.src === 'string' ? props.src : props.src.src} />;
  },
}));

方案2：修改fileMock返回值

如果不想Mock组件，直接修改__mocks__/fileMock.js的返回值为合法的路径格式即可：

// 返回符合URL规则的占位路径
module.exports = '/test-placeholder.png';
// 也可以返回静态资源导入格式的对象，适配所有场景
// module.exports = { src: '/test-placeholder.png', width: 100, height: 100 };

可选方案（Transformer方案修正） #

如果你想用transform方案，需要修正3处配置：

1. 先注释掉moduleNameMapper中匹配图片/字体等静态资源的那一行规则，避免和transform冲突
2. 修正jest.config.js中的transform配置，删除错误的"\\.js$": "jest"行，放开babel转译配置：

transform: {
  "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": ["<rootDir>/fileTransformer.js", {}]
},

3. 修改fileTransformer.js的导出格式，适配高版本Jest要求：

const path = require('path');

module.exports = function process(src, filename) {
  return `module.exports = ${JSON.stringify(path.basename(filename))};`;
};

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