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

您可以指定自定义moduleNameMapper，而不是依赖transform，您可以在其中返回图像路径而不是其源。可以在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"
    }
  }
}

Answer 2

对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个要发表评论的声誉，因此无法评论他的回答；这是我的第一个答案！

我想在使用Jest Snapshots时获得我的图像文件名/路径

2 个答案: