react-native - React Native Jest 测试套件失败 : TypeError: Cannot read property 'propTypes' of undefined

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 添加正确的 mocks 为我修复了它。我不得不补充:

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

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