CODEWITHSUNDEEP
react-nativejestjs
Hols
Hols

Reputation: 391

React Native Jest Test Suite Fails: TypeError: Cannot read property 'propTypes' of undefined

I am trying to use the Jest test suite that comes with the app created with react-native init but I am getting this error when I run 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)

This is the code of the test that is failing...

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 />);
});

Not sure how to resolve it, several errors I was getting i managed to fix by either mocking the module (like AsyncStorage, geolocation, NetInfo) or adding their package name to the jest object in package.json like so:

 "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)/)"
    ]
  }

My babel.config file just has...

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

Am I missing some step in the configuration? Not sure if it helps but I am using React Native v0.60.5. Thanks in advance.

Upvotes: 3

Views: 3727

Answers (2)

xojan
xojan

Reputation: 65

Adding the right mocks for react-native-gesture-handler fixed it for me. I had to add:

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

You can find more documentation here: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#testing

Upvotes: 2

Kubilay Kiymaci
Kubilay Kiymaci

Reputation: 472

You should define jest config like this in your package.json.

 "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"
    ]
  },

Upvotes: 0

Related Questions