如何在Jest中跳过图片Mock，获取真实图片属性？

你遇到的问题是因为Jest全局Mock了所有图片文件，导致所有图片的src都被替换成了test-file-stub。要在单个测试中针对特定图片使用真实路径，不能直接取消Mock（因为Node无法解析真实的图片文件），而是需要针对该图片文件单独Mock，返回你期望的路径。

下面是具体的实现方案：

方法一：单个测试用例中覆盖全局Mock #

在你的测试用例里，render组件之前，添加针对目标图片的Mock配置，让它返回需要的真实路径：

describe('Buttons', () => {
  test('Clear filters work after filtering tools, workflows and using searchbar', async () => {
    // 针对特定图片覆盖全局Mock，返回期望的真实路径
    jest.doMock('images/tools-selected.png', () => 'images/tools-selected.png');
    
    render(<HeaderBar {...defaults} />);
    const clearFilterButton = screen.getByRole('button', { name: 'Clear Filters' });
    const toolsButton = screen.getByRole('button', { name: 'TOOLS' });
    const selectedTools = await within(toolsButton).findByRole('img');
    expect(selectedTools).toHaveAttribute('src', 'images/tools-selected.png');
  });
});

关键细节： #

• jest.doMock只会作用于当前测试用例，不会影响其他测试的Mock行为，完美适配单个测试需要特殊处理的场景。
• 务必确保jest.doMock里的文件路径，和你组件中导入该图片的路径完全一致（比如组件里如果是import img from '../images/tools-selected.png'，这里的路径也要对应调整）。

方法二：全局Mock逻辑适配（可选） #

如果你有多个测试需要针对特定图片使用真实路径，可以修改__mocks__/fileMock.js的逻辑，根据文件名返回不同的值：

// __mocks__/fileMock.js
module.exports = (path) => {
  // 匹配目标图片，返回真实路径
  if (path.includes('tools-selected.png')) {
    return 'images/tools-selected.png';
  }
  // 其他图片保持默认的stub
  return 'test-file-stub';
};

不过这种方法是全局生效的，如果你只是单个测试需要特殊处理，更推荐方法一。

为什么不能直接用jest.unmock？ #

因为Node.js环境无法直接解析图片文件（.png等格式），如果取消Mock，Jest会尝试加载真实的图片文件，直接抛出解析错误。所以必须针对图片文件Mock一个字符串路径，而不是直接取消Mock。

内容的提问来源于stack exchange，提问作者Ömer Keskinkilic