jest and react-native-gesture-handler

Hi,
I’m getting the following when testing with jest and using jest-expo …
Cheers,
Stephen.

TypeError: Cannot read property 'directEventTypes' of undefined

      1 | import React from "react";
      2 | import { Animated } from "react-native";
    > 3 | import { PanGestureHandler, State } from "react-native-gesture-handler";
        | ^
      4 |
      5 | export default class SpringHeader extends React.Component {
      6 |   scale = new Animated.Value(1);

      at Object.directEventTypes (node_modules/react-native-gesture-handler/GestureHandler.js:49:24)
      at Object.<anonymous> (rf-components/src/SpringHeader.js:3:1)
      at Object.<anonymous> (rf-components/src/LoginPage.js:2:1)

Jest setup

"jest": {
    "preset": "jest-expo",
    "rootDir": "..",
    "roots": [
      "<rootDir>/rf-native",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "<rootDir>/rf-native/jestsetup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },

package.json

"dependencies": {
    "expo": "^29.0.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
    "rf-components": "0.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-jest": "^23.4.2",
    "babel-preset-flow": "^6.23.0",
    "crna-make-symlinks-for-yarn-workspaces": "^1.0.1",
    "enzyme": "^3.5.0",
    "enzyme-adapter-react-16": "^1.3.0",
    "enzyme-to-json": "^3.3.4",
    "jest-enzyme": "^6.0.3",
    "jest-expo": "^29.0.0",
    "metro-bundler-config-yarn-workspaces": "^1.0.3",
    "react-dom": "^16.4.2",
    "react-native-mock": "^0.3.1",
    "react-native-mock-render": "^0.1.1",
    "react-test-renderer": "^16.4.2",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0",
    "prop-types": "^15.6.2"
  }

jest setup

import Enzyme, { shallow, render, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;

jest.mock("react-native", () => require("react-native-mock-render"), {
  virtual: true
});

We also have this issue, with no custom jest setup. We are using "jest-expo": "^30.0.0", however.

We also had this issue and found a solution. You have to mock the react-native-gesture-handler:

/* eslint-disable */
jest.mock('react-native-gesture-handler', () => {});
/* eslint-enable */
2 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.