Next.js中使用Jest测试本地图片导入失败问题求助

问题重现 #

测试包含落地页图片的首页时，Jest抛出解析错误：

FAIL  src/test/unit/pages/home.test.tsx
● Test suite failed to run

Jest encountered an unexpected token

SyntaxError: Invalid or unexpected token

> 1 | import LandingImage from '~/asset/images/landing/landing.png';
    | ^

已配置moduleNameMapper指向fileMock.js，且尝试过常见解决方案但无效。

排查与解决步骤 #

1. 校验moduleNameMapper配置格式与位置

确保配置在jest.config.js的顶级moduleNameMapper对象中，且正则和路径正确：

module.exports = {
  // 其他Jest配置
  moduleNameMapper: {
    // 匹配所有资源文件
    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/src/tests/unit/fileMock.js",
    // 必须配置路径别名映射（如果项目用了~/）
    "^~/(.*)$": "<rootDir>/src/$1"
  },
  // 其他配置...
};

注意：如果项目使用~/作为路径别名，Jest无法自动识别，必须手动添加映射规则，否则会跳过mock直接解析原文件。

2. 确认fileMock.js内容与路径

fileMock.js需要导出一个占位值，示例：

module.exports = 'test-file-stub';

同时检查<rootDir>对应的路径是否正确，确保client/src/tests/unit/fileMock.js在项目根目录下存在。

3. 配置TypeScript类型声明（TS项目必做）

在项目中添加资源文件的类型声明，比如创建src/types/assets.d.ts：

declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

// 其他资源类型可按需添加

并在tsconfig.json的include数组中包含该文件：

{
  "include": ["src/**/*", "src/types/**/*"]
}

4. 清除Jest缓存

缓存可能导致配置不生效，运行命令清空缓存：

jest --clearCache

之后重新执行测试命令。

5. 检查配置冲突

• 确保transform选项中没有处理图片文件的规则，避免和moduleNameMapper冲突
• 检查transformIgnorePatterns，确保没有把图片所在目录加入忽略转换列表

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