Next.js项目使用Jest测试Image组件时静态资源Mock异常咨询

• 已参照webpack环境静态资产处理指引完成Jest配置，配置代码如下：

moduleNameMapper: {
  /* 处理图片类静态资源导入 */
  '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$':
    '<rootDir>/__mocks__/fileMock.js',
},

• 配置基础功能正常：测试引入静态资源的文件时，Jest不会抛出基础的资源导入错误。
• 测试基于Next.js/React开发的业务组件时出现异常，组件使用Next.js内置<Image>组件渲染图片，核心代码如下：

return (
    <Image width={list.width} height={list.height} src={list.src} alt='Chord Information'/>
)

• 实际运行环境中，静态导入图片得到的list变量结构符合预期：

{
    height:"24px",
    width:"24px",
    src:"/a/valid/path/"
}

• 测试环境异常表现：
  • 渲染<Image>时未传入width/height属性的情况下，Jest会抛出校验错误，提示必须补充height、width或fill属性
  • 传入list.src作为src属性值时，Jest提示list.src为undefined
  • 测试中打印list变量返回值为test-file-stub，是现有静态资源Mock规则的正常表现：图片资源被Mock为字符串，而非运行时实际导出的携带尺寸、路径的元数据对象，因此访问list的任意属性都会返回undefined。
• 核心诉求：现有Mock逻辑无法满足Next.js <Image>组件的参数校验要求，不希望在业务代码中添加仅适配测试环境的条件判断，需要该场景下的标准测试处理方案。

方案1：调整静态资源Mock返回结构 #

替换原有返回字符串的fileMock逻辑，让静态资源导入的Mock返回值和Next.js实际运行时的导出结构一致，无需修改业务代码即可满足<Image>的参数校验要求。
修改__mocks__/fileMock.js内容：

// __mocks__/fileMock.js
module.exports = {
  src: '/test-mock-image.jpg',
  width: 24,
  height: 24
};

如果单测需要验证不同图片的尺寸、路径差异，可以将Mock导出为可配置的工厂函数，在具体用例中按需覆盖返回值即可。

方案2：Mock Next.js内置Image组件 #

业务单测不需要覆盖第三方框架内置组件的实现逻辑，可以直接Mocknext/image模块，用原生img标签替换内置的Image组件，绕开其严格的参数校验规则。
新建__mocks__/next/image.jsx文件：

// __mocks__/next/image.jsx
const MockedImage = (props) => {
  return <img {...props} />;
};

export default MockedImage;

该方案可以完全隔离框架内置组件的逻辑对业务单测的影响，避免因为框架版本升级带来的组件校验规则变化导致单测异常，是业务组件测试的通用实践。

方案3：使用Next.js官方测试适配工具 #

如果需要测试环境尽可能贴近真实运行逻辑，可以直接使用Next.js官方提供的Jest适配工具，工具内置了静态资源处理、<Image>组件、路由等所有Next.js特有能力的Mock逻辑，完成初始化配置后不需要手动编写各类适配规则。

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