如何用Jest创建图片Mock，验证动态返回的图片文件名？

云上老周

2026-6-21

解决动态图片导入的测试验证问题

核心方案：使用动态Mock解析图片文件名

不要用返回固定字符串的fileMock，而是编写一个根据导入路径动态返回文件名的Mock，这样就能适配gender参数带来的分支逻辑。

步骤1：创建自定义图片Mock文件

在项目根目录下的__mocks__文件夹（没有则新建）里创建fileMock.js：

module.exports = (filePath) => {
  // 从导入路径中提取最后一段（即文件名）
  return filePath.split('/').pop();
};

步骤2：配置测试框架指向该Mock

若使用Jest

在jest.config.js中修改moduleNameMapper：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    // 匹配所有常见图片格式，指向自定义Mock
    '\\.(svg|png|jpg|jpeg|gif)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

若使用Vitest

在vitest.config.js中配置mock规则：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  // 其他配置...
  test: {
    mockReset: true,
    environment: 'jsdom', // 需DOM环境时添加
    mock: {
      // 匹配图片文件，使用自定义Mock
      '\\.(svg|png|jpg)$': '<rootDir>/__mocks__/fileMock.js',
    },
  },
});

步骤3：编写测试用例验证

现在可以正常编写测试，验证不同gender下返回的图片文件名：

import getConfig from './path-to-your-function-file';

test('getConfig returns correct images for male gender', () => {
  const optionsData = getConfig('male');
  expect(optionsData[0].title).toBe('first title');
  expect(optionsData[0].image).toBe('fire.svg');
  expect(optionsData[1].image).toBe('wind.svg');
});

test('getConfig returns correct images for non-male gender', () => {
  const optionsData = getConfig('female');
  expect(optionsData[1].image).toBe('water.svg');
});