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

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返回图像路径而不是源的自定义,而不是依赖于您.可以在模拟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"
    }
  }
}