React-native-gesture-handler: Importing react-native-gesture-handler crashes within jest

[fbartho]

I just upgraded to [email protected] which now makes me a consumer of react-native-gesture-handler! Wooo!

Unfortunately, when I run our jest snapshot tests, the global scope of react-native-gesture-handler expects certain native modules to exist!

https://github.com/kmagiera/react-native-gesture-handler/blob/77491194049b82f26f358a09abc662ef27265527/GestureHandler.js#L26-L56

This means that jest then crashes in any tests that import react-navigation which imports react-native-gesture-handler.

Workaround:

NativeModules.UIManager = NativeModules.UIManager || {};
NativeModules.UIManager.RCTView = NativeModules.UIManager.RCTView || {};
NativeModules.RNGestureHandlerModule = NativeModules.RNGestureHandlerModule || {
    State: { BEGAN: "BEGAN", FAILED: "FAILED", ACTIVE: "ACTIVE", END: "END" },
};

I embedded the above code near the top of file in my node_modules/react-native-gesture-handler/GestureHandler.js, and the problem went away. -- For the medium term, I'll put the following snippet in my jest beforeAll.js:

import { NativeModules as RNNativeModules } from "react-native";
RNNativeModules.UIManager = RNNativeModules.UIManager || {};
RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
RNNativeModules.RNGestureHandlerModule = RNNativeModules.RNGestureHandlerModule || {
    State: { BEGAN: "BEGAN", FAILED: "FAILED", ACTIVE: "ACTIVE", END: "END" },
};

I'm happy to help contribute to this repo, but I don't know what strategy you want to take when solving this.

[alvinthen]

To add on, mocking react-native-gesture-handler doesn't work either.

Here's how it looks like.

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';

import App from '../App';

global.fetch = jest.fn(() => new Promise(resolve => resolve()));
jest.mock('react-native-gesture-handler', () => {});

it('renders correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

[dsznajder]

I'm not sure if it's good or not but I made this running with:

jest.mock('NativeModules', () => ({
  UIManager: {
    RCTView: () => {},
  },
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {},
  },
}))

[rsmelo92]

after mocking a new error ocurred

[stigi]

Update to @dsznajder workaround:

RCTView actually should return an empty object else you'll run into TypeError: Cannot read property 'directEventTypes' of undefined
Next issue you'll run into is Invariant Violation: Native module cannot be null.. Add the KeyboardObserver mock to work around that one.

That leaves us with this patch work:

jest.mock("NativeModules", () => ({
  UIManager: {
    RCTView: () => ({
      directEventTypes: {}
    })
  },
  KeyboardObserver: {},
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {}
  }
}))

[codeflowee]

What I noticed in addition was that version 1.0.9 was working. But I had to upgrade to 1.0.12 in order use latest DrawerLayout, after this jest tests started crashing with:

TypeError: Cannot read property 'forceTouchAvailable' of undefined

      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:422:1)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/Swipeable.js:11:23)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/index.js:1:525)

[dsznajder]

@codeflowee You can mock forceTouchAvailable as rest of nativeModules

jest.mock('NativeModules', () => ({
  PlatformConstants: {
    forceTouchAvailable: false,
  },
}))

[DnEgorWeb]

Any updates on this issue? These workarounds didn't work for me. After mocking I get similar error: Cannot read property propTypes of undefined.

[osdnk]

If anyone here have some experience in writing these mocks, I'll be happy to merge them

[hyochan]

How about this one?

  ● rendering test › encountered a declaration exception

    TypeError: Cannot read property 'directEventTypes' of undefined

      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:47:19)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/Swipeable.js:11:23)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/index.js:1:440)

Update: Nevermind, above solutions works right. Here is what I've done.

NativeModules.RNGestureHandlerModule = {
  attachGestureHandler: jest.fn(),
  createGestureHandler: jest.fn(),
  dropGestureHandler: jest.fn(),
  updateGestureHandler: jest.fn(),
  forceTouchAvailable: jest.fn(),
  State: {},
  Directions: {}
};

NativeModules.PlatformConstants = {
  forceTouchAvailable: false,
};

NativeModules.UIManager = {
  RCTView: () => ({
    directEventTypes: {},
  }),
};

[carmenchapa]

@hyochan, can I ask which file are you putting this code in?

[Lythenas]

I managed to fix this issue for me by creating a setup file called jestSetup.js with the following content:

import { NativeModules as RNNativeModules } from "react-native";
RNNativeModules.UIManager = RNNativeModules.UIManager || {};
RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
RNNativeModules.RNGestureHandlerModule = RNNativeModules.RNGestureHandlerModule || {
  State: { BEGAN: "BEGAN", FAILED: "FAILED", ACTIVE: "ACTIVE", END: "END" },
  attachGestureHandler: jest.fn(),
  createGestureHandler: jest.fn(),
  dropGestureHandler: jest.fn(),
  updateGestureHandler: jest.fn(),

};
RNNativeModules.PlatformConstants = RNNativeModules.PlatformConstants || {
  forceTouchAvailable: false
};

Which is a combination of the workaround posted by others in this issue.

I then added

"setupFiles": [
  "./jestSetup.js"
]

to the jest configuration section in package.json.

[linux08]

Hi @Lythenas ,
I tried your configuration above.It returned me this TypeError: Cannot set property RCTView of #<Object> which has only a getter.

[Lythenas]

@linux08 I don't know why you get that error. I'm also quite new to react-native. Maybe someone else can help.

For reference here is the jest section of my package.json:

  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!react-native|native-base-shoutem-theme|react-navigation-stack|@react-navigation|react-navigation-fluid-transitions)"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "setupFiles": [
      "./jestSetup.js"
    ]
  }

[jeffmwells]

Hilarious... I managed to mock it without changing a setup file.

Folder structure:

- react-native-gesture-handler.js
- react-native-gesture-handler/
-- Swipeable.js

react-native-gesture-handler.js is empty!

Swipeable.js

import React from "react";
const RN = require("react-native");

class Swipeable extends React.Component {
    render() {
        return <RN.View>{this.props.children}</RN.View>;
    }
}
export default Swipeable;

package.json

"enzyme": "3.6.0",
"enzyme-adapter-react-16": "1.5.0",
"enzyme-to-json": "3.3.4",
"jest": "23.6.0",
"react-native-mock-render": "0.1.2",
"react-test-renderer": "16.4.1",

[charliejeppsson]

The workarounds above didn't solve my problem for components where I'm using react-navigation's own FlatList component (strongly recommend it). As a temporary solution I also added

jest.mock('react-native/Libraries/Lists/FlatList', () => 'FlatList');

to these components to use the default RN FlatList component instead to make the tests pass.

[Kida007]

I tried all the solutions , and keep getting one error after other.

at starting i got:

  ● Test suite failed to run
    TypeError: Cannot read property 'State' of undefined

      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:54:36)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/Swipeable.js:11:23)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/index.js:1:525)

After trying @jeffmwells I got @rsmelo92 's error as above.

After trying @Lythenas i got :

    /Users/ravipiyush/testing/RNTesting/node_modules/@react-navigation/native/dist/withOrientation.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:440:17)
      at Object.get withOrientation [as withOrientation] (node_modules/@react-navigation/native/dist/index.js:17:12)
      at Object.<anonymous> (node_modules/react-navigation-stack/dist/views/Header/Header.js:538:13

Its been hours . Is there a way to get jest working with react-native-gesture-handler.

[kmagiera]

Hi all. This seems like a very important problem for us to solve. I saw many people reporting here, would any of you have time to prepare a minimal repo on github that'd illustrate the problem. It would help us a ton and allow for a much quicker resolution of this issue

[mehranabi]

Hi @kmagiera . I have a similar error to others.
I created a simple repo on GitHub: https://github.com/mehranabi/rn-gh-error , when I try to run the test in that project, I get an error (Not the same as my main project but a similar one). Check it out!

[Kida007]

hey @kmagiera , I also created a repo . not sure if the errors are exactly same with @mehranabi .
https://github.com/Kida007/RnghTesting
Thanks

[mehranabi]

Hi everyone, Actually this mock fixes react-native-gesture-handler problems for me:

jest.mock('NativeModules', () => ({
  UIManager: {
    RCTView: () => ({
      directEventTypes: {},
    }),
  },
  KeyboardObserver: {},
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {},
  },
  PlatformConstants: {
    forceTouchAvailable: false,
  },
}))

But after this i get this error, and think it's releated to react-navigation...:

D:\Mehran\Projects\ReactNative\RNGestureHandlerError\node_modules\@react-navigation\native\dist\withOrientation.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:440:17)
      at Object.get withOrientation [as withOrientation] (node_modules/@react-navigation/native/dist/index.js:17:12)
      at Object.<anonymous> (node_modules/react-navigation-stack/dist/views/Header/Header.js:538:16)

[osdnk]

I think that

UIManager: {
    RCTView: () => ({
      directEventTypes: {},
    }),
  },

is no longer needed.
Also I faced bug like @mehranabi, but after removing react-navigation it was no longer present, so I don't know whether it's because of RNGH. / @brentvatne

[Kida007]

@osdnk have you used Swipeable component of RNGH after removing react-navigation ?

[osdnk]

Yes, it works. Built our example app without react-navigation with swipeable screen instead of App.js and it works 🤷‍♂️ .

[Kida007]

@osdnk You were Right ! after removing React-Navigation and mocking Directions and forceTouchAvailable , the Swipeable Errors Went away. Great Deduction.

Edit:
Created a Branch for this . https://github.com/Kida007/RnghTesting/tree/v2

[mehranabi]

@Kida007 @osdnk

Hey everyone, I added this to transformIgnorePatterns and finally my test passed:
@react-navigation/.*

jset in package.json:

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|@react-navigation/.*)"
    ]
  },

[osdnk]

Nice, nice.
I hope I will prepare some repo with example how to make tests in jest with RNGH soon. Or maybe some of you have already done it and I could share it somewhere in docs? 😄 Would be so grateful!

[brentvatne]

the expo jest preset might be useful for people to reference here:

• https://github.com/expo/expo/blob/master/packages/jest-expo/jest-preset.json
• https://github.com/expo/expo/blob/7c30288bebb64ae3086b3a00f151c5982cd9fbc6/packages/jest-expo/src/preset/setup.js#L167-L199

[osdnk]

@brentvatne
Hm, I'm not sure if I want to mock it on this level. I don't have strong use case for it, but I believe that we should not mock anything but for native module.

[brentvatne]

yeah you're probably right @osdnk, i'll replace that with whatever else people come up with that works :)

[hyochan]

This is related to issue I've posted in react-native. I will share my jest.config.js and jestSetup.js for those who's suffering with current issue (@carmenchapa).

[mehranabi]

Thank you @brentvatne for sharing useful links with me in https://github.com/react-navigation/react-navigation/issues/5662 and https://github.com/kmagiera/react-native-gesture-handler/issues/344#issuecomment-470306357 , that helped me solve my problem...
And now, my repo https://github.com/mehranabi/rn-gh-error is working ... :)

[matheushf]

If someone is still facing this, I solved with this:

package.json

...
"setupFiles": [
    "./jest.setup.js"
]

jest.setup.js

jest.mock('react-native-gesture-handler', () => {
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

taken from here expo/jest-expo

[hxiongg]

After all the suggested mocking, I still ran into this error.

TypeError: Cannot read property 'Direction' of undefined

      at Object.<anonymous> (node_modules/react-native-gesture-handler/Directions.js:5:24)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:22:42)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/Swipeable.js:10:23)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/index.js:1:440)

jest.mock('NativeModules', () => ({
  UIManager: {
    RCTView: () => ({
      directEventTypes: {},
    }),
  },
  KeyboardObserver: {},
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Direction: {}, // this is Direction not Directions right? Tried both and didn't work either
  },
}));

[lucasgouvea]

after trying many suggestions and getting the most variable errors
i did what @matheushf said and finally got it solved.

[voxspox]

jest.mock('NativeModules', () => ({
... this will mock EVERY native module!
}))

I think the problem with mocking NativeModules is that EVERY native module is mocked! Thus after the tests pass a RNGH related line it will fail at the next line related to another native module p.ex. Keyboard, AsyncStorage, UIManager, ... This is maybe not what you want to archive.

Instead replace single modules like suggested by @fbartho:

import { NativeModules } from "react-native";
NativeModules.RNGestureHandlerModule = {};

Alternatively you can mock all components of react-native-gesture-handle like @matheushf suggested

I put this stuff into my jest setup file like @Lythenas

[aprihodko]

const mockNativeModules = {
  UIManager: {
    getViewManagerConfig: jest.fn(),
  },
  KeyboardObserver: {},
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {},
  },
  PlatformConstants: {
    forceTouchAvailable: false,
  },
  WebSocketModule: {
    connect: jest.fn(),
    send: jest.fn(),
    sendBinary: jest.fn(),
    ping: jest.fn(),
    close: jest.fn(),
    addListener: jest.fn(),
    removeListeners: jest.fn(),
  },
};

fixed the issue for me

[robertoclavijob]

If someone is still facing this, I solved with this:

package.json

...
"setupFiles": [
    "./jest.setup.js"
]

jest.setup.js

jest.mock('react-native-gesture-handler', () => {
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

taken from here expo/jest-expo

I also added the NativeModules mock to jest.setup.js

jest.mock('react-native-gesture-handler', () => {
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

jest.mock('NativeModules', () => ({
  UIManager: {
    RCTView: () => {},
  },
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {}
  },
  PlatformConstants: {
    forceTouchAvailable: false,
  },
  KeyboardObserver: { 

  } 
}))

Modified the package.json jest section in this way

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "./jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-native-vector-icons|react-native-version-number|react-native-device-info|react-navigation|react-native-safe-area-view|react-navigation-drawer|react-native-easy-grid|react-native-elements|react-navigation-stack|react-native-fontawesome|react-native-progress|react-native-material-dropdown|react-native-material-ripple|react-native-material-textfield|react-native-material-buttons|react-native-languages|react-native-restart|react-native-keyboard-aware-scroll-view|react-native-iphone-x-helper|react-native-collapsible|react-native-modal|react-native-animatable|@react-native-community/async-storage|@react-navigation/.*))"
    ],
    "setupFiles": [
      "./jest/jest.setup.js"
    ]
  },

And also had to create a temporary jest/preprocessor.js
https://github.com/facebook/react-native/issues/22175#issuecomment-477138096

/**
 * Your own [temporary?] transform for React Native
 */
const generate = require('@babel/generator').default
const transformer = require('metro-react-native-babel-transformer')
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction')
const metroBabelRegister = require('metro-babel-register')

metroBabelRegister([])

module.exports = {
  process(src, file) {
    const { ast } = transformer.transform({
      filename: file,
      options: {
        ast: true,
        dev: true,
        enableBabelRuntime: false,
        experimentalImportSupport: false,
        hot: false,
        inlineRequires: false,
        minify: false,
        platform: '',
        projectRoot: '',
        retainLines: true,
        sourceType: 'unambiguous',
      },
      src,
      plugins: metroBabelRegister.config.plugins,
    })

    return generate(
      ast,
      {
        code: true,
        comments: false,
        compact: false,
        filename: file,
        retainLines: true,
        sourceFileName: file,
        sourceMaps: true,
      },
      src,
    ).code
  },

  getCacheKey: createCacheKeyFunction([
    __filename,
    require.resolve('metro-react-native-babel-transformer'),
    require.resolve('@babel/core/package.json'),
  ]),
}

[AndreasEK]

My workaround below is only needed, if you're on a version prior to 1.2.1. That version ships with it's own jestSetup.js that can be used.

Instead of duplicating most of what was already defined in the jest setup for react-native itself, my working solution now looks like this – thanks to @robaca for helping me to come to that solution:

package.json

Note: You probably need to adjust the transformIgnorePatterns to the list of libraries that you have in your project, which still need to be processed by Babel.

  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.59.5",
    "react-native-gesture-handler": "^1.0.16",
    "react-native-vector-icons": "^6.3.0",
    "react-navigation": "^3.3.2",
    "react-navigation-header-buttons": "^2.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "babel-jest": "24.7.1",
    "jest": "24.7.1",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|react-navigation-header-buttons|react-navigation-stack|@react-navigation)"
    ],
    "setupFiles": [
      "./jest.setup.js"
    ]
  },

jest.setup.js

Since react-native itself is already mocking the NativeModules, this setup just adds the mocks for the gesture handler.

import {
  NativeModules,
} from 'react-native';

Object.assign(NativeModules, {
  RNGestureHandlerModule: {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {}
  },
  PlatformConstants: {
    forceTouchAvailable: false,
  }}
);

[osdnk]

Take a look at the newest changes in the new release,

[voxspox]

I still get:

   TypeError: Cannot read property 'Direction' of undefined

      at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:20:1)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/Swipeable.js:10:1)

with RNGH 1.2.1

I can fix this by including the following in my test setup:

NativeModules.RNGestureHandlerModule = {}

[andreialecu]

Still have to use the jest.setup.js posted by @AndreasEK above on newest RNGH 1.2.1 for jest to work. Getting TypeError: Cannot read property 'Direction' of undefined otherwise. The one liner by @voxspox above, by itself, didn't work in my case.

Actually, the following works:

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

Pretty hidden in the documentation, found it by looking at the commits. See https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#testing

[pranavpandey1998official]

I can confirm that issue still exists

[taranda]

I needed to modify my KeyboardObserver mock as follows:

    ...
    KeyboardObserver: {
      addListener: jest.fn(),
      getConstants: jest.fn(),
      removeListeners: jest.fn(),
    },
    ....

[AndreasEK]

Confirm this is fixed from 1.2.1 onwards.

[matthargett]

It turned out that our apps' jest-setup.js wasn't including react-native's, which includes all these mocks. Added this line to the top of our jest setup, and it fixed our issues:

import 'react-native/jest/setup';

[fbartho]

@AndreasEK -- we're on 1.2.1 according to our yarn.lock, and unfortunately our jest.mock( workaround is still necessary. Do you have any pointers on the correct configuration here?

@matthargett -- when I comment out our workaround jest.mock("react-native", () => {… and just include import 'react-native/jest/setup'; many of my tests start failing, so that doesn't work for us :(

[christianleeser]

this worked for us.
In setup.ts:
jest.mock('react-native-gesture-handler', () => { return {} })

[rsmelo92]

@osdnk Apparently this still won't work, workarounds are still necessary :/ could you please re open it?

[ghost]

I get

Test suite failed to run

Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

[ElliDy]

Tried all the solutions above, but still getting this error

TypeError: Cannot read property 'Direction' of undefined

  at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
  at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

[anacnfalcao]

@larchapp I have the same issue, have you been able to solve it?

[AilsonFreire]

Same here, I guess I tried all workarounds above, nome of then worked.

[slavlazar]

I was able to solve this with the right combination of the suggested fixes in this thread ... below is what worked for me:

Adding @react-navigation/.* to transformIgnorePatterns in package.json jest config..

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|@react-navigation/.*)"
    ]
}

Mocking react-native-gesture-handler, react-native-reanimated and react-native-tab-view in a jest-setup.js file

jest.mock('react-native-gesture-handler', () => {
  // eslint-disable-next-line global-require
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

jest.mock('react-native-reanimated', () => {});
jest.mock('react-native-tab-view', () => {});

Hope that helps anyone still looking for a solution!

[GioCirque]

The solution from @slavlazar worked for me with two augmentations. I'm not using tab view, so I removed that mock and got an error about accessing Clock of undefined, so I added Clock to the react-native-reanimated mock.

// <rootDir>/__setup__/general.ts
jest.mock('react-native-gesture-handler', () => {
  // eslint-disable-next-line global-require
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock'),
);

// <rootDir>/jest.config.js
module.exports = {
  collectCoverage: true,
  coverageDirectory: './build/test/coverage/',
  coverageReporters: ['html', 'json', 'text-summary'],
  collectCoverageFrom: [
    './app/**/*.{ts,tsx,js,jsx}',
    '!**/node_modules/**',
    '!**/vendor/**',
    '!**/amplify/**',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  preset: 'react-native',
  reporters: [
    'default',
    [
      'jest-junit',
      {
        suiteName: 'App Unit Tests',
        outputDirectory: './build/test/',
        outputName: 'junit.xml',
        ancestorSeparator: ' › ',
        usePathForSuiteName: true,
        titleTemplate: '{classname} › {title}',
        classNameTemplate: vars => vars.filename.split('.').shift(),
      },
    ],
    [
      'jest-html-reporter',
      {
        pageTitle: 'App Unit Tests',
        outputPath: './build/test/results.html',
        includeFailureMsg: true,
        includeConsoleLog: true,
      },
    ],
  ],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|@react-navigation/.*)',
  ],
  testPathIgnorePatterns: ['/node_modules/', '/_utils.ts'],
  setupFiles: [
    '<rootDir>/__setup__/general.ts',
    '<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js',
  ],
  setupFilesAfterEnv: ['<rootDir>/__setup__/enzyme.ts'],
  testEnvironment: 'enzyme',
};

// partial package.json for version references
...
  "dependencies": {
    "aws-amplify": "1.2.3",
    "aws-amplify-react": "2.5.3",
    "aws-amplify-react-native": "2.2.3",
    "babel-plugin-react-require": "3.1.1",
    "date-fns": "2.6.0",
    "graphql": "0.13.0",
    "i18n-js": "3.3.0",
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-default-preference": "1.4.1",
    "react-native-elements": "1.2.6",
    "react-native-fs": "2.16.1",
    "react-native-gesture-handler": "1.4.1",
    "react-native-localize": "1.3.1",
    "react-native-reanimated": "1.3.0",
    "react-native-screens": "2.0.0-alpha.6",
    "react-native-sound": "0.10.12",
    "react-native-vector-icons": "6.6.0",
    "react-native-voice": "0.2.6",
    "react-navigation": "4.0.10",
    "react-navigation-drawer": "2.3.1",
    "react-navigation-stack": "1.10.3",
    "react-redux": "7.1.1",
    "redux": "4.0.4"
  },
  "devDependencies": {
    "@aws-amplify/cli": "3.16.0",
    "@babel/core": "7.6.4",
    "@babel/preset-env": "7.6.3",
    "@babel/runtime": "7.6.3",
    "@react-native-community/eslint-config": "0.0.5",
    "@types/jest": "24.0.20",
    "@types/node": "10.17.0",
    "@types/react": "16.9.11",
    "@types/react-native": "0.60.22",
    "@types/react-redux": "7.1.5",
    "@types/react-test-renderer": "16.9.1",
    "babel-jest": "24.9.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "eslint": "5.16.0",
    "eslint-config-prettier": "6.5.0",
    "eslint-plugin-prettier": "3.1.1",
    "jest": "24.9.0",
    "jest-enzyme": "7.1.1",
    "jest-html-reporter": "2.6.2",
    "jest-junit": "9.0.0",
    "jsdom": "15.2.0",
    "metro-react-native-babel-preset": "0.56.3",
    "prettier": "1.18.2",
    "react-addons-test-utils": "15.6.2",
    "react-dom": "16.11.0",
    "react-test-renderer": "16.11.0",
    "redux-devtools-extension": "2.13.8",
    "redux-mock-store": "1.5.3",
    "typescript": "3.6.4"
  }
...

[jgking2]

To add to this, I was able to get it to work with a pretty simple Mock.

export default {};

In a file in __mocks__/react-native-gesture-handler.js

[varemenos]

If you are looking for an answer, look at @andreialecu comment.

[pau-riosa]

I was able to solve this with the right combination of the suggested fixes in this thread ... below is what worked for me:

Adding @react-navigation/.* to transformIgnorePatterns in package.json jest config..

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|@react-navigation/.*)"
    ]
}

Mocking react-native-gesture-handler, react-native-reanimated and react-native-tab-view in a jest-setup.js file

jest.mock('react-native-gesture-handler', () => {
  // eslint-disable-next-line global-require
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

jest.mock('react-native-reanimated', () => {});
jest.mock('react-native-tab-view', () => {});

Hope that helps anyone still looking for a solution!

Thank you! it helps!

[wcandillon]

Thank you for the fix @dsznajder :)

[6thCode]

Hi guys, this was what worked for me and most likely work for you...

After installing jest

npm install --save-dev jest
npm install --save-dev babel-jest regenerator-runtime

Then go to your package.json file, under your

 "jest": {
    "preset": "react-native"
 }

include this
```
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
]
}

The end result will be

"jest": {
"preset": "react-native",
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
]
}
```

Then run npm test 🙂🙂

[BeaRRRRR]

Nothing worked for me except @6thCode fix, thank you so much! :smile:

[Samtapes]

I am having another trouble with this new configuration:

  "jest": {
     "preset": "react-native",
     "setupFiles": [
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!native-base)/"
     ]
  }

I am getting this error with AsyncStorage

      at printWarning (node_modules/fbjs/lib/warning.js:16:13)
      at warning (node_modules/fbjs/lib/warning.js:34:18)
      at warnOnce (node_modules/react-native/Libraries/Utilities/warnOnce.js:12:3)
      at Object.get AsyncStorage [as AsyncStorage] (node_modules/react-native/index.js:186:5)
      at src/routes.js:48:18
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8825:30)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8859:15)


ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      46 |           dia: getDayMonth().day,
      47 |           mes: getDayMonth().month
    > 48 |         }
         |          ^
      49 | 
      50 |         // Enviando para o DB  que fiz login
      51 |         socket.emit('login', data);

      at Object.get AsyncStorage [as AsyncStorage] (node_modules/react-native/index.js:187:12)
      at src/routes.js:48:18
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8825:30)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8859:15)
      at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8490:14)
  console.error
    The above error occurred in the <Routes> component:
        in Routes (created by App)
        in App

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8637:25)
      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8673:9)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9636:9)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2906:16)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2928:13)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8956:15)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11155:11)

E:\Programacao\Apps\FiapApp\node_modules\scheduler\cjs\scheduler.development.js:40
            throw e;
            ^

TypeError: _reactNative.AsyncStorage.getItem is not a function
    at E:\Programacao\Apps\FiapApp\src\routes.js:48:31
    at commitHookEffectListMount (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8825:30)
    at commitPassiveHookEffects (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8859:15)
    at Object.invokeGuardedCallbackImpl (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8490:14)
    at invokeGuardedCallback (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8584:35)
    at flushPassiveEffectsImpl (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11201:13)
    at unstable_runWithPriority (E:\Programacao\Apps\FiapApp\node_modules\scheduler\cjs\scheduler.development.js:592:16)
    at runWithPriority (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:1594:14)
    at flushPassiveEffects (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11172:16)
    at E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11067:15
npm ERR! Test failed.  See above for more details.

[TunvirRahman]

~Still have to use the jest.setup.js posted by @AndreasEK above on newest RNGH 1.2.1 for jest to work. Getting TypeError: Cannot read property 'Direction' of undefined otherwise. The one liner by @voxspox above, by itself, didn't work in my case.~

Actually, the following works:

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

Pretty hidden in the documentation, found it by looking at the commits. See https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#testing

Awesome,. that worked.

[Gatreek92]

Fixed by using React Native ScrollView instead of react-native-gesture-handler's

[srinu6]

Tried all the solutions above, but still getting this error

TypeError: Cannot read property 'Direction' of undefined

  at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
  at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

I have the same issue, how you solved this? can you please tell.

[srinu6]

Tried all the solutions above, but still getting this error

TypeError: Cannot read property 'Direction' of undefined

  at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
  at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

I have the same issue, how you solved this? can you please tell.

thank you @6thCode, your reply worked for me!

[anastely]

I am having another trouble with this new configuration:

  "jest": {
     "preset": "react-native",
     "setupFiles": [
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!native-base)/"
     ]
  }

I am getting this error with AsyncStorage

      at printWarning (node_modules/fbjs/lib/warning.js:16:13)
      at warning (node_modules/fbjs/lib/warning.js:34:18)
      at warnOnce (node_modules/react-native/Libraries/Utilities/warnOnce.js:12:3)
      at Object.get AsyncStorage [as AsyncStorage] (node_modules/react-native/index.js:186:5)
      at src/routes.js:48:18
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8825:30)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8859:15)


ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      46 |           dia: getDayMonth().day,
      47 |           mes: getDayMonth().month
    > 48 |         }
         |          ^
      49 | 
      50 |         // Enviando para o DB  que fiz login
      51 |         socket.emit('login', data);

      at Object.get AsyncStorage [as AsyncStorage] (node_modules/react-native/index.js:187:12)
      at src/routes.js:48:18
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8825:30)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8859:15)
      at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8490:14)
  console.error
    The above error occurred in the <Routes> component:
        in Routes (created by App)
        in App

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8637:25)
      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8673:9)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9636:9)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2906:16)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2928:13)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8956:15)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11155:11)

E:\Programacao\Apps\FiapApp\node_modules\scheduler\cjs\scheduler.development.js:40
            throw e;
            ^

TypeError: _reactNative.AsyncStorage.getItem is not a function
    at E:\Programacao\Apps\FiapApp\src\routes.js:48:31
    at commitHookEffectListMount (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8825:30)
    at commitPassiveHookEffects (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8859:15)
    at Object.invokeGuardedCallbackImpl (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8490:14)
    at invokeGuardedCallback (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:8584:35)
    at flushPassiveEffectsImpl (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11201:13)
    at unstable_runWithPriority (E:\Programacao\Apps\FiapApp\node_modules\scheduler\cjs\scheduler.development.js:592:16)
    at runWithPriority (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:1594:14)
    at flushPassiveEffects (E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11172:16)
    at E:\Programacao\Apps\FiapApp\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:11067:15
npm ERR! Test failed.  See above for more details.

Are you solve it?
I've faced the same issue :\