用于反应本机静态图像抛出警告的开玩笑快照

Question

我正在尝试编写快照测试来检查是否返回了正确的图像。当我只使用零变换时，结果总是“1”，这不是很有帮助。我进入该网站并将其添加到我的 package.json

"transform": {
  "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/fileTransformer.js"
}

并创建一个名为 fileTransformer 的文件，如下所示

    // fileTransformer.js
const path = require('path');

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

现在测试产生了有用的快照，这很棒，但是我没有在我的控制台中收到这样的警告

console.error node_modules/prop-types/checkPropTypes.js:20
      Warning: Failed prop type: Invalid prop `source` supplied to `Image`.
          in Image

Answer 1

你可以看看moduleNameMapper配置

"^[./a-zA-Z0-9$_-]+\.png$": "<rootDir>/RelativeImageStub.js",

在文件中您可以导出虚拟图像路径

RelativeImageStub.js

export default '/dummy/path/to/dummyImage.png';

您还应该能够模拟导入图像的结果：

Component.spec.js

import Component from './Component';

jest.mock('./path/to/the/image.png', () => "dummy/path/image.png");

Component.js

import image from './path/to/the/image.png';

export default function Component() {
  return <Image source={image} />;
}

这样，如果指定的路径不存在，您也会得到一个错误。

用于反应本机静态图像抛出警告的开玩笑快照

Jest snapshots for react native static images throwing warnings

snapshot

jestjs

react-native