Skip to content

Unable to render a NavigationContainer when linking prop is present #1762

Description

@roybselim

I followed the react navigation testing instructions here: https://reactnavigation.org/docs/testing/?example=dynamic#navigation-between-tabs

And I can successfully navigate to the second screen.

But when i include the prop linking inside the <NavigationContainer> like this <NavigationContainer linking={linking} />, I am no longer able to render the component

Here's my code:

import { act, render, screen, userEvent} from '@testing-library/react-native'
import { Button, Text, View } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer, useNavigation } from '@react-navigation/native'

const linking = {
  prefixes: [],
  config: {
    screens: {
      Home: 'home',
      Settings: 'settings'
    }
  }
}

jest.useFakeTimers();

const HomeScreen = () => {
  const navigation: any = useNavigation()
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button testID='test1' title="click" onPress={() => {navigation.navigate('Settings')}} />
    </View>
  );
};

const SettingsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button testID='test1' title="click" onPress={() => {}} />
    </View>
  );
};

const Tab = createBottomTabNavigator();

export const MyTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

test('navigates to settings by tab bar button press', async () => {
  const user = userEvent.setup();

  render(
    <NavigationContainer linking={linking}>
      <MyTabs />
    </NavigationContainer>
  );

  console.log(screen.debug())

  const button = screen.getByText('click')

  await user.press(button);

  act(() => jest.runAllTimers());

  expect(screen.getByText('Settings screen')).toBeVisible();
});

Unable to find an element with text: click

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions