如何在测试中手动模拟 Svg？

我在我的应用程序中使用存根文件来模拟图像，这对我来说 99% 的时间都有效。但是，我有一个组件可以根据输入渲染不同的图像，因此我希望能够在单元测试中检查输入是否创建了正确的输出。

基本上我想做的是，如果用户输入“狮子”，我的组件将显示狮子的图片，“老虎，老虎等。使用模块名称映射器， 总是如此测试文件存根我希望能够jest.mock('../lion.svg', ()=> 'lion.svg')用于特定测试。

谢谢杰斯特的变身 https://jestjs.io/docs/en/next/code-transformation配置设置你可以这样做。

包.json

"jest": {
  "transform": {
    "\\.svg$": "<rootDir>/fileTransformer.js"
  }
  ...
}

重要的

您需要明确提供transform到其他扩展（特别是*.js and *.jsx）否则你会得到错误。所以它应该是这样的：

"transform": {
  "^.+\\.js$": "babel-jest",
  "\\.svg$": "<rootDir>/fileTransformer.js"
   ...
}

As for 文件转换器.js它只是模拟导出文件的路径（您可以添加任何转换来删除路径或扩展名或其他内容）：

const path = require('path');

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

It means

import svgIcon from './moon.svg';

会像

const svgIcon = 'moon.svg'

所以对于包含的组件

...
  <img src={svgIcon} />

你可以这样写断言

expect(imgElementYouMayFind.props.src)
  .toEqual('moon.svg')