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

Question

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

基本上我想要做的是如果用户输入“狮子”，我的组件将显示狮子的图片，“老虎老虎等。使用 moduleNameMapper，它总是 test-file-stub 并且我希望能够jest.mock('../lion.svg', ()=> 'lion.svg') 进行特定测试。

Answer 1

感谢Jest's transform 配置设置，您可以这样做。

package.json

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

重要

您需要将transform 显式提供给其他扩展（尤其是*.js 和*.jsx），否则会出错。所以应该是这样的：

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

至于 fileTransformer.js 它只是模拟导出文件的路径（您可以添加任何转换来去除路径或扩展名或其他）：

const path = require('path');

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

意思是

import svgIcon from './moon.svg';

会像这样工作

const svgIcon = 'moon.svg'

所以对于包含的组件

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

你可以写这样的断言

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

Answer 2

只是对@skyboyer 建议的一点补充：

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

相反，您需要这样：

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

注意;关闭大括号后。