使用 webpack 配置运行 Jest 测试

Posted 2023-02-22

【中文标题】使用 webpack 配置运行 Jest 测试

【英文标题】：running Jest tests with webpack configuration

【发布时间】：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 等参数的路径也无法解析。

【参考方案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;
  ,
;