React Native Jest 测试套件失败：TypeError：无法读取未定义的属性“propTypes”答案

【问题标题】：React Native Jest Test Suite Fails: TypeError: Cannot read property 'propTypes' of undefinedReact Native Jest 测试套件失败：TypeError：无法读取未定义的属性“propTypes”
【发布时间】：2020-01-08 21:32:54
【问题描述】：

我正在尝试使用通过 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。提前致谢。

【问题讨论】：

标签： react-native jestjs

【解决方案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

【讨论】：

【解决方案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"
    ]
  },

【讨论】：