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

Question

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

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

Answer 1

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

package.json

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

重要

您需要显式向其他扩展(尤其是*.js和*.jsx)提供transform，否则您将收到错误。所以它应该是这样的:

"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')