feat(props): adding test id and library mock example (#931)

* feat(props): adding test id

* docs(readme): adding mock example

Author: mateoguzmana

README.md

@@ -277,6 +277,45 @@ It will contain id of the given action.
 |-------------------------|----------|
 | ({nativeEvent}) => void | No       |
 
+## Testing with Jest
+
+In some cases, you might want to mock the package to test your components. You can do this by using the `jest.mock` function.
+
+```ts
+import type { MenuComponentProps } from '@react-native-menu/menu';
+
+jest.mock('@react-native-menu/menu', () => ({
+  MenuView: jest.fn((props: MenuComponentProps) => {
+    const React = require('react');
+
+    class MockMenuView extends React.Component {
+      render() {
+        return React.createElement(
+          'View',
+          { testID: props.testID },
+          // Dynamically mock each action
+          props.actions.map(action =>
+            React.createElement('Button', {
+              key: action.id,
+              title: action.title,
+              onPress: () => {
+                if (action.id && props?.onPressAction) {
+                  props.onPressAction({ nativeEvent: { event: action.id } });
+                }
+              },
+              testID: action.id
+            })
+          ),
+          this.props.children
+        );
+      }
+    }
+
+    return React.createElement(MockMenuView, props);
+  })
+}));
+```
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

example/src/App.tsx

@@ -163,6 +163,7 @@ export const App = () => {
         ]}
         shouldOpenOnLongPress={true}
         themeVariant={themeVariant}
+        testID="menuView"
       >
         <View style={styles.button}>
           <Text style={styles.buttonText}>Test</Text>

src/UIMenuView.tsx

@@ -8,8 +8,13 @@ import type { NativeMenuComponentProps } from './types';
 const MenuView: React.FC<React.PropsWithChildren<NativeMenuComponentProps>> = ({
   style,
   children,
+  testID,
 }) => {
-  return <View style={style}>{children}</View>;
+  return (
+    <View style={style} testID={testID}>
+      {children}
+    </View>
+  );
 };
 
 export default MenuView;

src/types.ts

@@ -154,6 +154,10 @@ type MenuComponentPropsBase = {
     left: number;
     right: number;
   };
+  /**
+   * Test ID for testing purposes
+   */
+  testID?: string;
 };
 
 export type MenuComponentProps =
@@ -175,4 +179,5 @@ export type NativeMenuComponentProps = {
   actionsHash: string;
   title?: string;
   hitSlop?: MenuComponentProps['hitSlop'];
+  testID?: string;
 };