How Unit test component which uses useQueryHooks and renders based on data?

[NitinChronext]

I have an app stack component that loads pages from the server through use query hook and then it shows loading or displays data or error if any. I want to write a unit test for this component not sure how can do this. My component has 2 usequeryHooks, below is code.

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const AppStack = () => {
  const forceUpdate = useForceUpdate();
  const { data: PagesList, isLoading: isPageListLoading } = useQuery(
    'pagelist',
    () => getPages(),
  );

  const { isLoading, error, data } = useQuery('tabs', () => getTabs());

  const StackNavigator = ({ tabmenu }) => {
    return (
      <Stack.Navigator>
        <Stack.Screen name={tabmenu.MenuName}>
          {props => (
            <ScreenBuilder
              {...props}
              selectedPage={tabmenu.TabMenuScreenName}
            />
          )}
        </Stack.Screen>
        {PagesList.PageItems.items.map(page => {
          return (
            <Stack.Screen name={page.slug} key={page.slug}>
              {props => (
                <ScreenBuilder
                  {...props}
                  title={page.name}
                  selectedPage={page.slug}
                />
              )}
            </Stack.Screen>
          );
        })}
      </Stack.Navigator>
    );
  };

  const Tabs = () => {
    ///const props = { selectedPage: 'home' };
    return (
      <Tab.Navigator>
        {data.map(tabmenu => {
          return (
            <Tab.Screen key={tabmenu.MenuName} name={tabmenu.MenuName}>
              {props => <StackNavigator {...props} tabmenu={tabmenu} />}
            </Tab.Screen>
          );
        })}
      </Tab.Navigator>
    );
  };

  return (
    <NavigationContainer>
      {isLoading && <Text>Loading...!!</Text>}
      {error && (
        <View contentContainerStyle={styles.content}>
          <Text>{error.message}</Text>
        </View>
      )}

      {data && PagesList && <Tabs />}
    </NavigationContainer>
  );
};

[TkDodo]

please see the official docs guidelines on testing:

• https://react-query.tanstack.com/guides/testing
• https://react-query.tanstack.com/community/tkdodos-blog#5-testing-react-query

[NitinChronext]

It just cover unit test of hooks no example on how to test component where we use useQuery hooks

[TkDodo]

not true. the article covers this and leads to a repo with examples: https://github.com/TkDodo/testing-react-query