Skip to content

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

@roybselim

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions