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

Question

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

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

Answer 1

感谢Jest 的转换配置设置，您可以做到这一点。

包.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')