Importing react-native-gesture-handler crashes within jest

I just upgraded to react-navigation@3.0 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.

[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

[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.