如何让Jest在TypeScript+React项目中返回正确的图片路径

问题原因 #

你的方案失效有两个核心问题：

• 配置位置错误：如果把该文件路径配置到了moduleNameMapper字段，Jest会直接导出该文件的整个模块对象，也就是你看到的{ process: [Function: process] }结果。自定义文件转换器必须配置在jest.config.js的transform字段中。
• 代码语法错误：你在导出路径时重复嵌套了引号，JSON.stringify()本身已经会给字符串包裹引号，额外加的单引号会导致导出结果格式异常。

修复步骤 #

第一步：修正图片转换器代码 #

新建文件jest/file-transformers/img-transformer.js，代码如下：

const path = require('path');

module.exports = {
  process(_, filename) {
    // 直接返回导出路径的代码，不需要额外套引号
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  }
};

如果你的项目是ES模块规范（package.json中type: "module"），则改用如下写法：

import path from 'path';

export default {
  process(_, filename) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  }
};

第二步：修正Jest配置 #

修改jest.config.js（或者package.json中的jest字段），添加transform规则：

module.exports = {
  // 其他现有配置保持不变
  transform: {
    // 原有babel之类的transform保留，比如：
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
    // 新增图片后缀的转换规则，指向你刚才写的转换器文件
    "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/jest/file-transformers/img-transformer.js"
  },
  // 注意：要删除moduleNameMapper中原来配置的图片匹配规则，避免冲突
  moduleNameMapper: {
    // 比如下面这种旧的硬编码配置要删掉
    // "\\.(png|jpg)$": "<rootDir>/jest/file-transformers/img-transformer.js"
  }
};

第三步：验证效果 #

配置完成后，测试中引入图片的返回值就是文件名本身，比如import image1Src from 'assets/img1.png'得到的image1Src值就是img1.png，你可以直接做断言：

expect(screen.getByRole('img').getAttribute('src')).toBe('img1.png');

如果你需要返回完整的绝对路径而非仅文件名，把转换器里的path.basename(filename)改成filename即可。

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