Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
roybselim opened this issue Apr 21, 2025 · 1 comment
Open

Comments

@roybselim
Copy link

roybselim commented Apr 21, 2025

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

@roybselim roybselim changed the title Unable to render a NavigationContainer when linking props is present Unable to render a NavigationContainer when linking prop is present Apr 21, 2025
@mdjastrzebski
Copy link
Member

Could you create a minimal repro repo based on our examples/basic?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants