我想在使用 Jest 快照时拥有我的图像文件名/路径

Question

我已经开始在一个新项目中大量使用Jest，现在我正在使用Jest的快照功能。

简而言之，它所做的就是以字符串形式呈现组件，将其存储在磁盘上(作为快照，您可以在repo中签入)，当您稍后运行测试时，它将比较快照是否没有更改。

我的问题是关于导入图像:

使用Jest处理这个问题的通常方法是指定一个处理程序来导入它们，模拟它们并返回一个随机字符串。这样，你的测试就不需要实际加载图像，它只会被模拟(否则你会得到异常，因为Node不知道如何处理import img from './image.png，只有Webpack通过加载器才知道)。

在Jest配置中，您可以这样做:

"jest": {
    "moduleNameMapper": {
      "^.+\.(png|jpg|jpeg|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/__mocks__/fileMock.js",
      "^.+\.(css|less|scss)$": "identity-obj-proxy"
    },
    [...]
}

如您所见，图像(png、jpeg等)都是使用fileMock进行"解析"的，简单来说就是:

module.exports = 'test-file-stub';

我这里的问题是，模拟有点太过分了:它总是返回相同的字符串，这意味着我的组件的快照呈现标志看起来像:

exports[`components - Flag should match the snapshot 1`] = `
<img
    alt="Flag"
    className="image"
    src="test-file-stub" />
`;

(输入类似于<Flag country="fr" />)

我想要的是我的快照呈现如下:

exports[`components - Flag should match the snapshot 1`] = `
<img
    alt="Flag"
    className="image"
    src="/some/path/fr.png" />
`;

我不相信我是唯一一个面临这个问题的人，但另一方面，我找不到任何资源来解决这个问题。

谢谢!

Answer 1

不依赖于moduleNameMapper，您可以指定一个自定义的transform，在那里您返回图像路径而不是其源。可以在mock CSS模块中找到一个工作示例，将其粘贴到下面以使事情变得更容易。

// fileTransformer.js
const path = require('path');
module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

和

// package.json (for custom transformers and CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}

Answer 2

那些对Valentin的建议和浅渲染有问题的人可以尝试在transform:

\.(js|jsx)$": "babel-jest"

变成:

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\.(js|jsx)$": "babel-jest",
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}

文件fileTransformer.js保持不变!

注:不能评论他的回答，因为我没有50的声誉来评论;这是我的第一个答案!