feat: enhance BottomSheetModal mock, add createBottomSheetScrollableC…

[gabimoncha]

This PR enhances the current mock file by adding:

• BottomSheetModal mock with renderProp pattern
• createBottomSheetScrollableComponent mock
• enum mocks

Motivation

Jest fails with the current implementation of BottomSheetModal when using renderProp to pass the present data in the Content, with the following error

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
          at BottomSheetModal (/Users/gabimoncha/Documents/second-brain/node_modules/@gorhom/bottom-sheet/mock.js:27:23)

<BottomSheetModal ref={frequencyPickerModalRef}>
	{({ data }) => <Content data={data} />}
</BottomSheetModal>

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[gabimoncha]

cc @gorhom can we merge this pls?

[gorhom]

thanks @gabimoncha 🙌

[gabimoncha]

no, thank you!

[vanstinator]

Noticed this PR breaks the example mock at https://github.com/gorhom/react-native-bottom-sheet/blob/master/mock.js#L6-L8 as the mock.js file is now returning JSX. I had to update my Jest config to allow transforms on this module. It might be worth mentioning that in the header comment.

[vanGalilea]

Noticed this PR breaks the example mock at https://github.com/gorhom/react-native-bottom-sheet/blob/master/mock.js#L6-L8 as the mock.js file is now returning JSX. I had to update my Jest config to allow transforms on this module. It might be worth mentioning that in the header comment.

Experience the same issue make sure you're adding "@gorhom/bottom-sheet" to your transformIgnorePatterns in jest.config.ts file

Or for the time being add your own mock file under __mocks__/@gorhom/bottom-sheet/index.tsx

This content did the work for me:

import { View } from "react-native";

export default (props: React.PropsWithChildren) => props.children;

export const BottomSheetView = (props: React.PropsWithChildren) => {
  return (
    <View {...props} className="bottom-sheet-view">
      {props.children}
    </View>
  );
};

export const BottomSheetModalProvider = (props: React.PropsWithChildren) => {
  return (
    <View {...props} className="bottom-sheet-modal-provider">
      {props.children}
    </View>
  );
};

/**
 * @gorhom/bottom-sheet/mock is broken in version v5.1.6 see [comment](https://github.com/gorhom/react-native-bottom-sheet/pull/2265#issuecomment-2962544697)
 *
 * For the time being, we mock the BottomSheetModal component to avoid issues with the lib.'s mock implementation.
 */
export const BottomSheetModal = (props: React.PropsWithChildren) => {
  return (
    <View {...props} className="bottom-sheet-modal">
      {props.children}
    </View>
  );
};