导入图像打破了开玩笑的测试

Question

在 React 组件中导入资产（例如，从“../../../assets/img/logo.png 导入徽标”）会出现这样的错误

({“Object.”:function(module,exports,require,__dirname,__filename,global,jest){�PNG

SyntaxError：ScriptTransformer._transformAndBuildScript 处的令牌无效或意外（node_modules/jest-runtime/build/script_transformer.js:305:17）

我开玩笑的配置是

"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
}

我错过了什么？

原文由 Ani Alaverdyan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

唯一的出路是在任何时候开玩笑地看到图像导入时模拟默认响应！

我们如何做到这一点？

• 首先，您告诉 Jest 在每次遇到图像导入时运行模拟文件。你通过将下面的密钥添加到你的 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" child

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

module.exports = '';

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

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

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

我希望我能提供帮助。 ＃干杯！

原文由 Adépòjù Olúwáségun 发布，翻译遵循 CC BY-SA 4.0 许可协议