在JEST + webpack5 + React环境下如何mock图片和路径？

方法1：全局配置mock所有静态资源（最推荐） #

在jest配置文件（jest.config.js 或者 package.json 内的jest字段）添加如下配置，统一处理所有图片类资源的mock，适配动态require场景：

module.exports = {
  // 其余原有配置保持不变
  moduleNameMapper: {
    // 匹配所有图片后缀，映射到固定mock值
    "\\.(png|jpg|jpeg|gif|svg|webp)$": "<rootDir>/test/__mocks__/fileMock.js",
    // 若你项目配置了路径别名，需同步配置别名映射规则，比如assets指向src/assets的场景：
    "^assets/(.*)$": "<rootDir>/src/assets/$1"
  }
}

新建test/__mocks__/fileMock.js文件，内容如下：

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

配置完成后所有图片引入都会被自动替换为固定字符串，无需每个测试用例单独mock。

方法2：调整单测试文件的mock写法 #

如果不想修改全局配置，可直接调整测试代码的mock规则：

• 注意jest.mock必须写在测试文件最顶部（所有import/require代码之前），不能放在it测试块内部，否则不生效
• 针对不存在的虚拟文件，需要添加virtual: true标记

// 测试文件最顶部添加
jest.mock('assets/images/BigFakeImage', () => 'mock-big-image-path', { virtual: true })

// 原有测试代码保持不变
const setup = () => {
  const props = {
    src: 'BigFakeImage',
    className: 'class-name-image',
    alt: 'big picture'
  };
  const {result} = renderHook(() => ImageComponent(props), {
    wrapper: ({children}) => (
      <Provider store={store}>{children}</Provider>
    )
  });
  return result.current;
};

it('should render <img/> with defined props', () => {
  const wrapper = setup();
  expect(wrapper).toMatchSnapshot();
});

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