使用 Jest 快照时，我想要我的图像文件名/路径

Question

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

简而言之，它所做的就是将您的组件呈现在一个字符串中，将其存储在磁盘上（作为快照，您可以在您的存储库中签入），然后当您稍后运行测试时，它会比较快照没有改变。

我的问题与导入图片有关：

处理 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

那些对Valentin 的建议和浅渲染有问题的人可以尝试在变换中包含这一行：

\\.(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 声望来评论；这是我在这里的第一个答案！

Answer 2

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

// 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"
    }
  }
}