Question

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

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

Answer 1

@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))};`;
  }
};

在结束大括号后请注意;。

Answer 2

由于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')

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

2 个答案: