How to add testing using Codegen "hooks" - use[Name] ....

[ghost]

Hi, I'm using Next / React. A Javascript Framework.

I love how useful the generated hooks are... is it possible to test them with jest?

I tried implement a version with MockedProvider... code below. And trying to see if I get data back.

// component

export default function CityPage({ cityInfo, title, breadcrumb }: any) {
  const { data, loading } = useFindManyRestaurantsQuery({
    variables: { input: { page: 1 } },
  });
  console.log('data', data);

import { MockedProvider } from '@apollo/client/testing';
import { render, screen } from '@testing-library/react';

import { DeliveryProvider } from '@/contexts/delivery';
import { CLIENT_RESTAURANTS_QUERY } from '@/gql/queries/findmany-restaurants';
import CityPage from '@/pages/client/city/[label]';

const City = () => (
  <MockedProvider
    mocks={[
      { request: { query: CLIENT_RESTAURANTS_QUERY } as any,
        result: { data: [{city: 'cool' } ]  },
      },
    ]}
    addTypename={false}
  ><CityPage /></MockedProvider>
);

/** Hero Test */
test('page has correct heading', async () => {
  render(<City />);
  expect(await screen.findByText('Loading...')).toBeInTheDocument();
});

running yarn test I sadly get.

 PASS  src/__tests__/ui/pages/client/city.test.tsx
  ● Console
    console.log
      data undefined
      at CityPage (src/pages/client/city/[label]/index.tsx:29:11)

Is there a way to test the "use-" hooks?

Edit:
I also made sure its just the "hook" that is the issue. I only swapped the "useFindManyRestaurantsQuery" to regular GraphQL with useQuery. And it return the data fine.

from
  const { data, loading } = useFindManyRestaurantsQuery({
    variables: { input: { page: 1 } },
  });
to
const { data, loading } = useQuery(CLIENT_RESTAURANTS_QUERY, {
    variables: { input: { page: 1 } },
  });

[charlypoly]

Hi @stephyswe,

Sorry for the late reply.

Does the document that you provide to your <MockProvider> is the one generated by GraphQL Code Generator?