如何使用 Jest 测试包含 PNG 图像的本机组件的反应

Question

正如我测试过的应用程序，其导航在节点模块中包含 png 图像，但测试失败。

\n

App.js的源代码

\n

import React from 'react';\nimport {SafeAreaView} from 'react-native';\nimport {styles} from './src/assets/styles';\nimport {AppStack} from './src/components/navs/stacks/AppStack';\n\nconst App = () => {\n  //TODO: Designing ui for spend and scheduled :progress\n  // doing list of data from utils/index.js :done\n  //fech those data to screen that needs them\n  return (\n    <SafeAreaView style={styles.app}>\n      <AppStack />\n    </SafeAreaView>\n  );\n};\n\nexport default App;\n

\n

应用程序测试.js

\n

import 'react-native';\nimport React from 'react';\nimport App from '../App';\n\n// Note: test renderer must be required after react-native.\nimport renderer from 'react-test-renderer';\n\nit('renders correctly', () => {\n  renderer.create(<App />);\n});\n\n

\n

预期结果： \n测试应呈现我的应用程序入口点，即App.js \n实际结果

\n

Janviers-MacBook-Pro:credex janvier$ npm test\n\n> credex@0.0.1 test\n> jest\n\n FAIL  __tests__/App-test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    /Volumes/D/Coding/credex/node_modules/@react-navigation/elements/lib/commonjs/assets/back-icon.png:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){\xef\xbf\xbdPNG\n                                                                                             \n\n    SyntaxError: Invalid or unexpected token\n\n      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)\n      at Object.<anonymous> (node_modules/@react-navigation/elements/lib/commonjs/index.tsx:20:3) \n

\n

Answer 1

错误的原因是 Jest 无法将 .png 文件（或任何图像文件）的二进制代码解释为 .js。

解决方案或更确切地说是解决方法是每当 Jest 遇到图像文件时模拟默认响应。

脚步：

1. 在名为（或任何名称）的文件夹中创建一个名为 ImageMock.js（如果您使用的是 TypeScript，则为 .tsx）的文件__mock__。

YourApp/__mock__/ImageMock.js

2. export default '';在ImageMock.js中编写
3. 在 package.json 的键中添加moduleNameMapper具有以下值的键jest

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

注意：您的特定错误仅需要 moduleNameMapper 键值中的 png。