Add legacy mocks (#4055)

## Description

This PR:

- Adds missing legacy mocks
- Adds info to docs about how to import jest utility functions
- Removes `react-native-worklets` mock from our `jestSetup`

## Test plan

New `mock` test

<details>
<summary>Also tested on this test code in new app:</summary>

```tsx
import React from 'react';
import { Text, View } from 'react-native';
import { render } from '@testing-library/react-native';
import {
  // v3 components
  RawButton,
  BaseButton,
  RectButton,
  BorderlessButton,
  Clickable,
  Pressable,
  ScrollView,
  FlatList,
  Switch,
  TextInput,
  RefreshControl,
  GestureHandlerRootView,
  // Legacy components
  LegacyRawButton,
  LegacyBaseButton,
  LegacyRectButton,
  LegacyBorderlessButton,
  LegacyPressable,
  LegacyScrollView,
  LegacyFlatList,
  LegacySwitch,
  LegacyTextInput,
  LegacyRefreshControl,
} from 'react-native-gesture-handler';
import {
  fireGestureHandler,
  getByGestureTestId,
} from 'react-native-gesture-handler/jest-utils';
import { State } from 'react-native-gesture-handler';

describe('v3 components render without crashing', () => {
  test('RawButton', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <RawButton />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('BaseButton', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <BaseButton />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('RectButton', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <RectButton />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('BorderlessButton', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <BorderlessButton />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('Clickable', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <Clickable />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('Pressable', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <Pressable />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('ScrollView', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <ScrollView />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('FlatList', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <FlatList data={[]} renderItem={() => null} />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('Switch', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <Switch />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('TextInput', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <TextInput />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });

  test('RefreshControl', () => {
    expect(() =>
      render(
        <GestureHandlerRootView>
          <ScrollView refreshControl={<RefreshControl refreshing={false} />} />
        </GestureHandlerRootView>,
      ),
    ).not.toThrow();
  });
});

describe('Legacy components render without crashing', () => {
  test('LegacyRawButton', () => {
    expect(() => render(<LegacyRawButton />)).not.toThrow();
  });

  test('LegacyBaseButton', () => {
    expect(() => render(<LegacyBaseButton />)).not.toThrow();
  });

  test('LegacyRectButton', () => {
    expect(() => render(<LegacyRectButton />)).not.toThrow();
  });

  test('LegacyBorderlessButton', () => {
    expect(() => render(<LegacyBorderlessButton />)).not.toThrow();
  });

  test('LegacyPressable', () => {
    expect(() => render(<LegacyPressable />)).not.toThrow();
  });

  test('LegacyScrollView', () => {
    expect(() => render(<LegacyScrollView />)).not.toThrow();
  });

  test('LegacyFlatList', () => {
    expect(() =>
      render(<LegacyFlatList data={[]} renderItem={() => null} />),
    ).not.toThrow();
  });

  test('LegacySwitch', () => {
    expect(() => render(<LegacySwitch />)).not.toThrow();
  });

  test('LegacyTextInput', () => {
    expect(() => render(<LegacyTextInput />)).not.toThrow();
  });

  test('LegacyRefreshControl', () => {
    expect(() =>
      render(<LegacyRefreshControl refreshing={false} />),
    ).not.toThrow();
  });
});

describe('fireGestureHandler works with v3 components', () => {
  test('Clickable onPress fires via gesture handler', () => {
    const onPress = jest.fn();

    render(
      <GestureHandlerRootView>
        <Clickable testID="clickable" onPress={onPress}>
          <Text>Press Me</Text>
        </Clickable>
      </GestureHandlerRootView>,
    );

    const gesture = getByGestureTestId('clickable');

    fireGestureHandler(gesture, [
      { oldState: State.UNDETERMINED, state: State.BEGAN },
      { oldState: State.BEGAN, state: State.ACTIVE },
      { oldState: State.ACTIVE, state: State.END },
    ]);

    expect(onPress).toHaveBeenCalledTimes(1);
  });

  test('RectButton onPress fires via gesture handler', () => {
    const onPress = jest.fn();

    render(
      <GestureHandlerRootView>
        <RectButton testID="rect" onPress={onPress} />
      </GestureHandlerRootView>,
    );

    const gesture = getByGestureTestId('rect');

    fireGestureHandler(gesture, [
      { oldState: State.UNDETERMINED, state: State.BEGAN },
      { oldState: State.BEGAN, state: State.ACTIVE },
      { oldState: State.ACTIVE, state: State.END },
    ]);

    expect(onPress).toHaveBeenCalledTimes(1);
  });
});
```

</details>

Author: m-bert

packages/docs-gesture-handler/docs/guides/testing.md

@@ -28,6 +28,8 @@ RNGH provides APIs, specifically [`fireGestureHandler`](#firegesturehandler) and
 ### fireGestureHandler
 
 ```ts
+import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
+
 fireGestureHandler: (componentOrGesture, eventList) => void;
 ```
 
@@ -80,6 +82,8 @@ const allImplicits = []; // 3 events, one BEGIN, one ACTIVE, one END with defaul
 ### getByGestureTestId
 
 ```tsx
+import { getByGestureTestId } from 'react-native-gesture-handler/jest-utils';
+
 getByGestureTestId: (testID: string) => Gesture;
 ```
 

packages/react-native-gesture-handler/jestSetup.js

@@ -8,6 +8,9 @@ jest.mock('./src/components/Pressable/Pressable', () =>
 jest.mock('./src/components/GestureComponents', () =>
   require('./src/mocks/gestureComponents')
 );
+jest.mock('./src/components/touchables', () =>
+  require('./src/mocks/Touchables')
+);
 jest.mock('./src/v3/detectors/HostGestureDetector', () =>
   require('./src/mocks/hostDetector')
 );
@@ -18,6 +21,9 @@ jest.mock('./lib/module/RNGestureHandlerModule', () =>
 jest.mock('./lib/module/components/GestureButtons', () =>
   require('./lib/module/mocks/GestureButtons')
 );
+jest.mock('./lib/module/components/touchables', () =>
+  require('./lib/module/mocks/Touchables')
+);
 jest.mock('./lib/module/components/Pressable', () =>
   require('./lib/module/mocks/Pressable')
 );
@@ -27,7 +33,3 @@ jest.mock('./lib/module/components/GestureComponents', () =>
 jest.mock('./lib/module/v3/detectors/HostGestureDetector', () =>
   require('./lib/module/mocks/hostDetector')
 );
-
-jest.mock('react-native-worklets', () =>
-  require('react-native-worklets/src/mock')
-);

packages/react-native-gesture-handler/src/__tests__/Errors.test.tsx

@@ -10,6 +10,10 @@ import {
 import { findNodeHandle, View } from 'react-native';
 import { VirtualDetector } from '../v3/detectors/VirtualDetector/VirtualDetector';
 
+jest.mock('react-native-worklets', () =>
+  require('react-native-worklets/src/mock')
+);
+
 beforeEach(() => cleanup());
 jest.mock('react-native/Libraries/ReactNative/RendererProxy', () => ({
   findNodeHandle: jest.fn(),

packages/react-native-gesture-handler/src/__tests__/mocks.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import {
+  LegacyRawButton,
+  LegacyBaseButton,
+  LegacyRectButton,
+  LegacyBorderlessButton,
+  LegacyPureNativeButton,
+} from '../mocks/GestureButtons';
+
+import {
+  LegacyScrollView,
+  LegacyFlatList,
+  LegacySwitch,
+  LegacyTextInput,
+  LegacyRefreshControl,
+} from '../mocks/gestureComponents';
+
+import {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from '../mocks/Touchables';
+
+import LegacyPressable from '../mocks/Pressable';
+
+import GestureHandlerRootView from '../components/GestureHandlerRootView';
+import { Touchable } from '../v3/components';
+
+describe('Jest mocks – legacy components render without crashing', () => {
+  test('LegacyRawButton', () => {
+    expect(() => render(<LegacyRawButton />)).not.toThrow();
+  });
+
+  test('LegacyBaseButton', () => {
+    expect(() => render(<LegacyBaseButton />)).not.toThrow();
+  });
+
+  test('LegacyRectButton', () => {
+    expect(() => render(<LegacyRectButton />)).not.toThrow();
+  });
+
+  test('LegacyBorderlessButton', () => {
+    expect(() => render(<LegacyBorderlessButton />)).not.toThrow();
+  });
+
+  test('LegacyPureNativeButton', () => {
+    expect(() => render(<LegacyPureNativeButton />)).not.toThrow();
+  });
+
+  test('LegacyPressable', () => {
+    expect(() => render(<LegacyPressable />)).not.toThrow();
+  });
+
+  test('LegacyScrollView', () => {
+    expect(() => render(<LegacyScrollView />)).not.toThrow();
+  });
+
+  test('LegacyFlatList', () => {
+    expect(() =>
+      render(<LegacyFlatList data={[]} renderItem={() => null} />)
+    ).not.toThrow();
+  });
+
+  test('LegacySwitch', () => {
+    expect(() => render(<LegacySwitch />)).not.toThrow();
+  });
+
+  test('LegacyTextInput', () => {
+    expect(() => render(<LegacyTextInput />)).not.toThrow();
+  });
+
+  test('LegacyRefreshControl', () => {
+    expect(() =>
+      render(<LegacyRefreshControl refreshing={false} />)
+    ).not.toThrow();
+  });
+
+  test('TouchableHighlight', () => {
+    expect(() =>
+      render(
+        <TouchableHighlight>
+          <Text>Test</Text>
+        </TouchableHighlight>
+      )
+    ).not.toThrow();
+  });
+
+  test('TouchableNativeFeedback', () => {
+    expect(() =>
+      render(
+        <TouchableNativeFeedback>
+          <Text>Test</Text>
+        </TouchableNativeFeedback>
+      )
+    ).not.toThrow();
+  });
+
+  test('TouchableOpacity', () => {
+    expect(() =>
+      render(
+        <TouchableOpacity>
+          <Text>Test</Text>
+        </TouchableOpacity>
+      )
+    ).not.toThrow();
+  });
+
+  test('TouchableWithoutFeedback', () => {
+    expect(() =>
+      render(
+        <TouchableWithoutFeedback>
+          <Text>Test</Text>
+        </TouchableWithoutFeedback>
+      )
+    ).not.toThrow();
+  });
+});
+
+test('Trigger press by text', () => {
+  const onPress = jest.fn();
+  const { getByText } = render(
+    <GestureHandlerRootView>
+      <Touchable activeOpacity={0.3} onPress={onPress}>
+        <Text>Press Me</Text>
+      </Touchable>
+    </GestureHandlerRootView>
+  );
+
+  fireEvent.press(getByText('Press Me'));
+
+  expect(onPress).toHaveBeenCalled();
+});

packages/react-native-gesture-handler/src/mocks/GestureButtons.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { TouchableNativeFeedback, View } from 'react-native';
-export const RawButton = ({ enabled, children, ...rest }: any) => (
+
+const RawButton = ({ enabled, children, ...rest }: any) => (
   <TouchableNativeFeedback disabled={enabled === false} {...rest}>
     {children ?? <View />}
   </TouchableNativeFeedback>
 );
-export const BaseButton = RawButton;
-export const RectButton = RawButton;
-export const BorderlessButton = TouchableNativeFeedback;
+
+export const LegacyRawButton = RawButton;
+export const LegacyBaseButton = RawButton;
+export const LegacyRectButton = RawButton;
+export const LegacyBorderlessButton = RawButton;
+export const LegacyPureNativeButton = RawButton;

packages/react-native-gesture-handler/src/mocks/Touchables.tsx

@@ -0,0 +1,6 @@
+export {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';

packages/react-native-gesture-handler/src/mocks/gestureComponents.tsx

@@ -1,23 +1,8 @@
-import {
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  ScrollView,
-  FlatList,
-  Switch,
-  TextInput,
-  DrawerLayoutAndroid,
+export {
+  ScrollView as LegacyScrollView,
+  FlatList as LegacyFlatList,
+  Switch as LegacySwitch,
+  TextInput as LegacyTextInput,
+  DrawerLayoutAndroid as LegacyDrawerLayoutAndroid,
+  RefreshControl as LegacyRefreshControl,
 } from 'react-native';
-
-export default {
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  ScrollView,
-  FlatList,
-  Switch,
-  TextInput,
-  DrawerLayoutAndroid,
-} as const;