How do you test BottomSheetModal?

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?

[bertrand-caron]

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

[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?