How to test modal screens of react-navigation in React Native app?

Viewed 34

In the app we open modal screens in the following way:

navigation.navigate('BottomSheetModal', {
  title: 'Some Title',
  children: (
    <SomeChildren
      {...someProps}
    />
  ),
});

/* OR */

navigation.navigate('PopUpModal', {
  title: 'Some Title',
  icon: <Icons.Fingerprint />,
  buttonText: 'Some Text',
  onButtonPress: someFunction,
  {...someOtherProps}
});

Here is the root navigator structure:

export const RootStackNavigator = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" backgroundColor={COLORS.TRANSPARENT} translucent />
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="App" component={AppTabNavigator} />
          {/* ... other screens ... */}
          <Stack.Group
            screenOptions={{
              animation: 'fade',
              presentation: 'transparentModal',
              gestureEnabled: false,
            }}
          >
            <Stack.Screen name="PopUpModal" component={PopUpModal} />
            <Stack.Screen name="LoadingModal" component={LoaderModal} />
            <Stack.Screen name="BottomSheetModal" component={BottomSheetModal} />
          </Stack.Group>
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

During a test, I can check the call of mocked navigate method, but I can't get access to any modal screen's tree and interact with its elements (buttons, inputs, etc.). renderWithProviders is just a regular call of create() method of react-test-renderer wrapped with providers

it('should show a modal', async () => {
    const tree = await renderWithProviders(<Dashboard {...props} />, preloadedState);

    // The modal window should be opened after <Dashboard /> mount

    await act(async () => {
      await wait(1000); // Wait for the API request to complete
    });

    expect(mockedNavigate).toBeCalledWith(
      'PopUpModal',
      expect.objectContaining({
        ...someFields
      })
    );

    const modal = tree.root.findByType(PopUpModal); // Error: No instances found with node type: "PopUpModal"
  });

Unfortunately, I am limited to the use of react-test-renderer only, and can't use React Native Testing Library.

Is there a way to get access to modal screens from the test of the current screen?

0 Answers
Related