Next.js+Jest测试时图片Mock失败报错，寻求解决方案

可能原因及对应解决办法 #

1. ES模块配置冲突 #

因为你在package.json中启用了"type": "module"，但Jest默认兼容CommonJS，若配置文件或Mock文件的模块格式不匹配，会导致Mock规则不生效。

• 将jest.config.js重命名为jest.config.mjs，确保Jest识别ES模块格式的配置文件
• 确保__mocks__/fileMock.js使用ES模块导出：

  export default 'test-file-stub';
  

2. moduleNameMapper规则未正确匹配 #

Jest没按规则拦截SVG文件，直接尝试解析原始文件导致报错。

• 调整正则规则为更通用的格式，覆盖所有图片类型：

  // 在jest.config.mjs中
  moduleNameMapper: {
    '^.+\\.(svg|png|jpg|jpeg|gif|webp)$': '<rootDir>/__mocks__/fileMock.js',
  }
  

• 确认<rootDir>指向项目根目录，若Mock文件不在根目录，需调整路径为正确的相对/绝对路径

3. Jest测试环境未配置 #

Next.js组件测试需要jsdom环境，缺失会导致部分配置不生效。

• 在jest.config.mjs中添加：

  testEnvironment: 'jsdom',
  

4. Transform规则干扰 #

若存在处理SVG的transform规则，会导致Jest跳过Mock直接解析文件。

• 确保transform仅处理JS/TS文件，同时排除SVG：

  // 在jest.config.mjs中
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.svg$',
  ],
  

5. Mock文件路径错误 #

若__mocks__文件夹放在子路由下而非项目根目录，Jest无法识别Mock规则。

• 将__mocks__文件夹移至项目根目录，确保<rootDir>/__mocks__/fileMock.js路径有效

验证步骤 #

运行jest --showConfig命令，查看实际生效的配置，确认moduleNameMapper中的图片规则已正确加载。

完整配置示例 #

jest.config.mjs：

export default {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^.+\\.(svg|png|jpg|jpeg|gif)$': '<rootDir>/__mocks__/fileMock.js',
    '^@/(.*)$': '<rootDir>/src/$1', // 若项目使用路径别名可添加
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.svg$',
  ],
};

__mocks__/fileMock.js：

export default 'test-file-stub';

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