使用 webpack 配置运行 Jest 测试

Question

我正在使用next-optimized-imagespackage 来优化 next.js 项目中的图像。

这是一个配置，应该使我能够加载图像并使用 URL 参数自动调整它们的大小，例如?sizes[]=300

什么有效

next.config.js

const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages({
  optimizeImagesInDev: true,
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: "responsive-loader",
        options: {
          adapter: require("responsive-loader/sharp"),
        },
      },
    ],
  },
});

我也在使用png和jpg优化库：

"imagemin-mozjpeg": "^8.0.0","imagemin-optipng": "^6.0.0"

我的 JSON/JS 文件的图像结构如下：

{
  ...,
  imgs: [
    require("../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300"),
    ...,
  ]
}

这样，当使用它时responsive-loader，所有内容都会按其应有的方式加载，即图像的路径将替换为应用程序中包含两个不同大小的路径的对象。

什么不起作用

然而，不起作用的是require在每个图像数组元素中引入声明之前曾经起作用的测试（玩笑测试）。它只是说它无法导入所需的模块，因为很可能它不使用使用参数解析这些路径的 webpack 配置。我如何告诉它这样做？

错误信息：

Cannot find module '../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300' from 'categories.js'

我不能简单地使用图像的路径，然后在标签require中使用它们<img src={require(path)} />，因为它们必须是相对的才能使该库工作，并且我在许多不同的组件中使用这些图像（有些是嵌套的）。使用这个库，当涉及到绝对路径以及带有诸如size未解析之类的参数的路径时，webpack 配置会变得非常困难。

Answer 1

弄清楚了。您所要做的就是为 jest 创建一个配置文件。

在你从到 的package.json改变中"test"react-scripts testjest -c jest.config.js

笑话配置.js

{
  "bail": true,
  "verbose": true,

  "moduleNameMapper": {
    "^.*(jpe?g|png).*$": "<rootDir>/assetsTransformer.js"
  }
}

moduleNameMapper用于匹配您需要的任何图像扩展名非常重要。创建另一个名为 的文件，assetsTransformer.js该文件将处理您所需的图像。如果不需要，您实际上不必对导入的图像执行任何操作。就我而言，我没有，所以我只是创建了一个包含以下内容的文件：

资产转换器.js

module.exports = {
  process(src, filename, config, options) {
    return;
  },
};