How do you test BottomSheetModal?

[Rc85]

Ask your Question

I am using react-test-renderer but I am unable to retrieve children of BottomSheetModal possibly because the modal is mounted to a portal above the component?

      <BottomSheetModal ref={bottomSheet} index={0} snapPoints={['90%']} data-testid='bottom-sheet'>
        <View style={{ marginBottom: 5, flexDirection: 'row', justifyContent: 'flex-end' }}>
          <Button
            appearance='ghost'
            onPress={() => bottomSheet.current.dismiss()}
            data-testid='close-bottom-sheet-button'
          >
            CLOSE
          </Button>
        </View>

        <BottomSheetScrollView contentContainerStyle={{ padding: 15 }}>
          <OrderLog order={order} data-testid='order-log' />
        </BottomSheetScrollView>
      </BottomSheetModal>

The data-testid inside the modal cannot be found. In my test:

    //BottomSheet.test.tsx
    const instance = create(
      <Provider store={store}>
        <ApplicationProvider {...eva} theme={{ ...eva.light, ...mtTheme }}>
          <BottomSheetModalProvider>
            <OrderFooter order={order('placed', 'delivery')} restaurantLocation={restaurantLocation} />
          </BottomSheetModalProvider>
        </ApplicationProvider>
      </Provider>
    );

    const bottomSheet = instance.root.findByProps({ 'data-testid': 'bottom-sheet' }); // this is found
    const closeBottomSheetButton = bottomSheet.findByProps({ 'data-testid': 'close-bottom-sheet-button' });
    const orderLog = bottomSheet.findByProps({ 'data-testid': 'order-log' })

Also tried instance.root.findByProps({ 'data-testid': 'close-bottom-sheet-button' }). And the error

No instances found with props: {"data-testid":"close-bottom-sheet-button"}

So how do we test this in our component?

[github-actions]

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

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[bertrand-caron]

Anyone has had any luck with this? I am using Detox, and I am struggling to programmatically tap components inside the BottomSheet :(

[ghernandez345]

I had a similar issue and did a bit of a cheat. Since i didn't care about the implementation details of the BottomSheetModal, I simply mocked BottomSheetModal and BottomSheetModalProvider in my testing framework to be RN View components. This means they will simply render as Views that render children, which will be your application code you care about testing.

Not the best or most elegant solution but it allowed me to test my application code without worrying about a complicated test setup to support Bottom Sheet Modal and Portal.

// in jest-setup.js

jest.mock('@gorhom/bottom-sheet', () => {
  const reactNative = jest.requireActual('react-native')
  const { View } = reactNative

  return {
    __esModule: true,
    default: View,
    BottomSheetModal: View,
    BottomSheetModalProvider: View,
    useBottomSheetModal: () => ({
      present: () => {},
      dismiss: () => {},
    }),
  }
})

// in my test file I just render my application component I wanna test.
// Im using react-testing-library

const { getByTestId } = render(
      <TicketSheet  />  /** this internally uses BottomSheetModal with my application code as its content **/
  )

  // ... normal test assertions

this may or may not work in your case but it worked for me. Also, I should mention that we also have some additional automated e2e tests covering our bottom sheet user flows which gives us confidence that bottom sheet library is working correctly within our application. If we didn't have that I'd probably be hesitant to use the technique I mention above.

[shamilovtim]

We are having issues with Detox and unfortunately the solutions proposed don't solve the problem for e2e testing. Is anyone aware of how to make Detox work with this library?

[MehdiG44]

By adding the modal to the tree "manually" and then presenting it (see the useEffect), I can test with Detox without issues.

const BottomSheetModal = ({
  children,
  setShow,
  bottomSheetModalRef,
}) => {
  const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);

  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);

  const renderBackdrop = useCallback(
    props => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    [],
  );

  useEffect(() => {
    bottomSheetModalRef.current.present();
  }, []);

  return (
    <LibraryBottomSheetModal
      snapPoints={animatedSnapPoints}
      handleHeight={animatedHandleHeight}
      contentHeight={animatedContentHeight}
      backdropComponent={renderBackdrop}
      keyboardBlurBehavior="restore"
      android_keyboardInputMode="adjustResize"
      enablePanDownToClose
      ref={bottomSheetModalRef}
      onDismiss={() => setShow(false)}>
      <BottomSheetView
        onLayout={handleContentLayout}
        testID="modal">
        {children}
      </BottomSheetView>
    </LibraryBottomSheetModal>
  );
};

BottomSheetModal.propTypes = {
  children: PropTypes.element.isRequired,
  setShow: PropTypes.func.isRequired,
  bottomSheetModalRef: PropTypes.object.isRequired,
};

export default BottomSheetModal;

[kylebake]

It's not well documented but the library does provide its own mock. If you set this in a jest-setup.js file:

import mockBottomSheet from '@gorhom/bottom-sheet/mock';
jest.mock('@gorhom/bottom-sheet', () => mockBottomSheet);

It should allow you to test the bottom sheet as you would any other View. However, on the latest version there is also a bug where the mock file contains some JSX despite being a JS file, which requires you to add the library to your transformIgnorePatterns:

transformIgnorePatterns: [
  "node_modules/(?!@gorhom/bottom-sheet|...other packages)"
]