javascript - 如何使用 Jest 测试包含 PNG 图像的 native 组件

Question

因为我已经测试了我的应用程序，该应用程序的导航在节点模块中包含 png 图像，但测试失败。

App.js源代码

import React from 'react';
import {SafeAreaView} from 'react-native';
import {styles} from './src/assets/styles';
import {AppStack} from './src/components/navs/stacks/AppStack';

const App = () => {
  //TODO: Designing ui for spend and scheduled :progress
  // doing list of data from utils/index.js :done
  //fech those data to screen that needs them
  return (
    <SafeAreaView style={styles.app}>
      <AppStack />
    </SafeAreaView>
  );
};

export default App;

App-test.js

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

预期结果:测试应呈现我的 App 入口点，即 App.js实际结果

Janviers-MacBook-Pro:credex janvier$ npm test

> credex@0.0.1 test
> jest

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    /Volumes/D/Coding/credex/node_modules/@react-navigation/elements/lib/commonjs/assets/back-icon.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             

    SyntaxError: Invalid or unexpected token

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@react-navigation/elements/lib/commonjs/index.tsx:20:3) 

Answer 1

错误的原因是 Jest 未能将 .png 文件(或任何图像文件)的二进制代码解释为 .js。

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

步骤:

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

YourApp/__mock__/ImageMock.js

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

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