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

Question

我已经开始使用 Jest 的 Jest a lot in a new project, and I am now using the Snapshot 功能。

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

我的问题是导入图片：

用 Jest 处理这个问题的通常方法是指定一个处理程序来导入它们，模拟它们和 return 一个随机字符串。这样，您的测试就不必实际加载图像，它只会被模拟（否则您会得到异常，因为 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等）都是"resolved"使用fileMock，简单来说就是：

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

我的问题是模拟有点过头了：它总是 return 相同的字符串，这意味着我对呈现标志的组件的快照看起来像：

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

您可以指定自定义 transform 而不是依赖 moduleNameMapper，您可以在其中 return 图片路径而不是其来源。可以在 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保持不变！

Note: Couldn't comment on his answer as I lack the 50 reputation to comment; this is my first answer here!

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

I'd like to have my image filenames / paths when using Jest Snapshots

javascript

unit-testing

reactjs

jestjs