【问题标题】：running Jest tests with webpack configuration使用 webpack 配置运行 Jest 测试
【发布时间】：2019-07-16 23:46:52
【问题描述】：

我正在使用 next-optimized-images 包来优化我在 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'

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

【问题讨论】：

标签： reactjs webpack jestjs next.js babeljs

【解决方案1】：

想通了。您所要做的就是为 jest 创建一个配置文件。

在您的 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;
  },
};

【讨论】：