时间戳

首页 > 解决方案 > Jest 无法解析图像文件

configuration - Jest 无法解析图像文件

问题描述

我正在尝试设置配置和模拟文件，以便开玩笑地解析/忽略图像文件，以便通过测试。几乎每一个在线资源都会让我找到位于的 jest 文档：https ://jestjs.io/docs/webpack#handling-static-assets ，它会告诉你如何处理这种情况。但是，在我的情况下不是。我已经尝试了创建模拟文件和使用转换器的两种选择。我当前的 jest.config.js：

module.exports = {
  
  projects: [
    {
      displayName: 'Unit',
      testMatch: ["**/?(*.)+(spec|test).[tj]s?(x)"],
      setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
      testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/cypress/"],
      moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
      moduleDirectories: ["node_modules", "bower_components", "shared"],
      moduleNameMapper: {
        "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js'
      },
      // transform: {
      //   "\\.js$": "jest",
      //   "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
      //   //'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
      // }
      
    },
    {
      displayName: 'Pacts',
      testMatch: ["**/?(*.)+(pacttest).[tj]s?(x)"],
      testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/cypress/"],
      watchPathIgnorePatterns: ["pact/logs/*", "pact/pacts/*"],
    }
  ],
  
};

我的文件模拟.js：

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

我的 styleMock.js：

module.exports = {};

我的文件Transformer.js：

const path = require('path');

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

//export default module.exports;
我的目录： 在此处输入图像描述

我一直在反复尝试配置中的不同选项，但它们几乎都导致我出现相同的两个错误，一个是我尝试使用变压器时，另一个是没有。注释掉转换器后，我在 fileMock.js 文件中抛出 2 个错误：

  1. 类型错误：无效的 URL：测试文件存根
  2. 无法解析 src “test-file-stub”next/image

这两个都指的是模拟的建议字符串。我最初认为字符串可能是代码实际处理某事的占位符。但经过一番阅读，我的理解是它实际上应该是一个字符串。也许它是取决于我的环境的特定字符串？并且next/image是我从中导入图像组件的地方。

我优先考虑模拟（如果我错了，请纠正我），因为我的理解是模拟告诉 jest 忽略图像文件并继续进行其余的测试，而转换器实际上试图将文件类型从 js 更改为jpg 或 png 或图像的任何文件类型。然而，我正在尽我所能。当我尝试使用未注释的变压器部分运行测试时，我在任何测试运行之前收到错误消息：TypeError: Jest: a transformm must export something。（这就是为什么有一个注释掉的导出默认语句。）

这是我第一次尝试这样的事情，我想我已经到了一个我想不出其他可以尝试的地步。如果有人经历过这样的事情，请给我一些知识。我不确定我的模拟文件是否设置不正确，或者它是否在配置中。

谢谢。

标签： configurationmockingts-jestreact-typescript

解决方案

我可以通过在此处创建图像 URL 来解决此问题： https ://www.base64-image.de/ 并用生成的 URL 字符串替换“test-file-stub”字符串。

module.exports = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSotUHeyg4pChOogFURFHrUIRKoRaoVUHk0s/hCYNSYuLo+BacPBjserg4qyrg6sgCH6AuLk5KbpIif9LCi1iPDjux7t7j7t3gFAvMc0KjAGaXjFTibiYya6IwVeE0I9ujCAgM8uYlaQkPMfXPXx8vYvxLO9zf44uNWcxwCcSzzDDrBCvE09tVgzO+8QRVpRV4nPiUZMuSPzIdcXlN84FhwWeGTHTqTniCLFYaGOljVnR1IgniaOqplO+kHFZ5bzFWStVWfOe/IXhnL68xHWag0hgAYuQIEJBFRsooYIYrTopFlK0H/fwDzh+iVwKuTbAyDGPMjTIjh/8D353a+Unxt2kcBzoeLHtjyEguAs0arb9fWzbjRPA/wxc6S1/uQ5Mf5Jea2nRI6BnG7i4bmnKHnC5A/Q9GbIpO5KfppDPA+9n9E1ZoPcW6Fx1e2vu4/QBSFNXyRvg4BAYLlD2mse7Q+29/Xum2d8PVXFym6OczU4AAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQflCBkOKh9/wZ+SAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg==';

推荐阅读