reactjs - 导入图像会破坏 Jest 测试

Question

在 React 组件中导入资源 (例如，从“../../../assets/img/logo.png 导入 Logo )给出这样的错误

({"Object.":function(module,exports,require,__dirname,__filename,global,jest){�PNG
SyntaxError: Invalid or unexpected token at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)

我的 Jest 配置是

"jest": {
"testRegex": ".*\\.spec\\.js$",
"moduleFileExtensions": [
  "js",
  "jsx",
  "json"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "assets"
],
"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"verbose": true,
"bail": true
}

我错过了什么？

Answer 1

当您导入图像文件时，Jest 会尝试将图像的二进制代码解释为 .js，因此会出错。

唯一的出路是在每次看到图像导入时模拟默认响应!

我们如何做到这一点？

• 首先，您告诉 Jest 在每次遇到图像导入时运行模拟文件。您可以通过将下面的 key 添加到您的 package.json 文件中来执行此操作

"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
      "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
}

注意:如果您已经有了"Jest"键，只需在其中添加"moduleNameMapper"子节点

• 最后，在您的根目录中创建一个mocks 文件夹，并在其中创建fileMock.js 文件。用下面的代码片段填充文件

module.exports = ''; 

注意:如果您使用的是 es6，则可以使用 export default ''; 来避免 Eslint 标志

完成上述步骤后，您可以重新开始测试，一切顺利。

注意。请记住在 moduleNameMapper 中添加图像文件的不同扩展名，以便它们可以被模拟。

希望对您有所帮助。 #干杯!