使用Webpack配置运行Jest测试

Question

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

这是一个配置，可以使我使用?sizes[]=300

这样的URL参数加载图像并自动调整其大小。

什么有效

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)} />它们，因为它们必须相对于该库才能工作，并且我在许多不同组件中使用这些图像（一些是嵌套的）。使用此库，当涉及绝对路径时，webpack配置将变得非常困难，而且带有诸如size这样的参数的路径也无法解析。

Answer 1

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

在您的package.json中，将"test"从react-scripts test更改为jest -c jest.config.js

jest.config.js

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

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

使用moduleNameMapper来匹配所需的任何图像扩展名很重要。创建另一个名为assetsTransformer.js的文件，该文件将处理您所需的图像。如果不需要，实际上您不需要对导入的图像做任何事情。就我而言，我没有，所以我只创建了一个包含以下内容的文件：

assetsTransformer.js

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