I am using @react-navigation/stack and have Jest tests failing anywhere I am using the GestureHandlerRefContext in a component:

TypeError: (0 , _native.createNavigatorFactory) is not a function
   > 5 | import { GestureHandlerRefContext } from '@react-navigation/stack';

Component use as:

import { GestureHandlerRefContext } from '@react-navigation/stack';
import { View, Text } from 'react-native';

export const CheckoutModal = () => {
   return (
        <View>
            <GestureHandlerRefContext.Consumer>
                {(ref) => (
                    <Scroll
                        keyboardShouldPersistTaps="handled"
                        simultaneousHandlers={scrollHandlers(ref)}
                        scrollEventThrottle={16}
                        onScroll={onScroll}
                    >
                        <View><Text>test</Text></Scroll>
                    </Scroll>
                )}
            </GestureHandlerRefContext.Consumer>
       </View>
   );
};

I have followed the “Testing with Jest” doc and have copied their mock for react-native-gesture-handler:

// include this line for mocking react-native-gesture-handler
import 'react-native-gesture-handler/jestSetup';

// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated
jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});

// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

But that does not work either.

The file for GestureHandlerRefContext in the @react-navigation/stack node_modules code has this:

import * as React from 'react';

export default React.createContext<React.Ref<
  import('react-native-gesture-handler').PanGestureHandler
> | null>(null);

Which is maybe the issue as it’s a direct import of the PanGestureHandler from the react-native-gesture-handler package? I’m guessing here.

I tried making a mock for @react-navigation/stack but I don’t think that’s the correct way to do this (as mentioned in the @react-navigation docs)

Does anyone have an idea of how to properly get this GestureHandlerRefContext mocked?