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?