Jest 无法解析图像文件

Question

我正在尝试将 jest 的配置和模拟文件设置为 parse/ignore 图像文件，以便通过测试。几乎所有在线资源都会将我引向位于以下位置的笑话文档：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/*"],
    }
  ],
  
};

我的fileMock.js:

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

我的styleMock.js:

module.exports = {};

我的fileTransformer.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 个错误：

类型错误：无效URL：测试文件存根
无法在 next/image

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

我优先考虑模拟（如果我错了请纠正我）因为我的理解是模拟告诉开玩笑忽略图像文件并继续测试的其余部分，而转换器实际上试图改变文件类型从 js 到 jpg 或 png 或图像的任何文件类型。但是，我正在尽我所能。当我尝试运行未注释变压器部分的测试时，我在任何测试甚至运行声明之前收到错误消息： TypeError: Jest: 一个 transformm 必须导出一些东西。（这就是为什么要注释掉 export default 语句的原因。）

这是我第一次尝试这样的事情，我想我已经到了我想不出还有什么可以尝试的地步。如果有人经历过这样的事情，请告诉我一些知识。我不确定是我的模拟文件设置不正确还是配置中有问题。

谢谢。

Answer 1

我可以通过在此处创建图像 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==';

Jest 无法解析图像文件

Jest Unable to Parse Image Files

configuration

mocking

ts-jest

react-typescript