React本机Jest测试套件失败: TypeError:无法读取未定义的属性“”propTypes“”

Question

我正在尝试使用使用react-native init创建的应用程序附带的Jest测试套件，但在运行npm test时遇到以下错误：

TypeError: Cannot read property 'propTypes' of undefined

  at propTypes (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:178:31)
  at Object.oldCreate [as createAnimatedComponent] (node_modules/react-native/jest/setup.js:79:23)
  at Object.Animated (node_modules/react-navigation-stack/lib/commonjs/views/BorderlessButton.tsx:5:28)
  at Object.<anonymous> (node_modules/react-navigation-stack/lib/commonjs/views/TouchableItem.tsx:19:1)

这是测试失败的代码...

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

import renderer from 'react-test-renderer';

beforeAll(() => { 
  jest.mock('@react-native-community/async-storage');
});

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

不确定如何解决它，我得到了几个错误，我设法通过模拟模块(如AsyncStorage，地理位置，NetInfo)或将它们的包名添加到package.json中的jest对象来修复，如下所示：

 "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|react-native-barcode-builder|react-native-maps|react-native-android-open-settings|react-native-qrcode-scanner|react-native-permissions|react-native-camera|react-native-google-maps-directions|jsbarcode|react-native-picker-select|react-native-datepicker|react-native-touch-id|react-native-screens|react-native-gesture-handler|react-navigation|react-navigation-stack)/)"
    ]
  }

我的babel.config文件有...

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

我是否遗漏了配置中的某个步骤？不确定它是否有帮助，但我使用的是React Native v0.60.5。提前谢谢。

Answer 1

为react-native-gesture-handler添加正确的模拟为我修复了它。我不得不补充一句：

"setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],

您可以在此处找到更多文档：https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#testing

Answer 2

您应该在package.json中像这样定义jest配置。

 "jest": {
    "preset": "react-native",
    "collectCoverage": true,
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "node_modules",
      "components"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native)"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "/jest",
      "assets",
      "lib"
    ],
    "modulePathIgnorePatterns": [
      "package",
      "assets",
      "lib"
    ]
  },