useInfiniteQuery not working when testing a component using it

[alessandrocapra]

Hello everybody! Did anybody experience issues in testing a component that uses an useInfiniteQuery hook? I don't want to test the custom hook itself , I want to check that the data is displayed as expected in the component.

I am using Jest + react-native-testing-library + MSW and my setup works perfectly for the useQuery hook (I followed the blog posts of the amazing @TkDodo), but this one escapes me. MSW works fine and I can see the mocked data coming from the handler, but in the component itself it goes through status == "loading and then it just stops, it doesn't run another time untile the status == success despite me awaiting for the result as usual.

My custom hook (and fetch function):

const getTransactions = async ({ pageParam = 1 }) => {
  const { data, headers } = await paymentsApi.get<
    GenericApiResponse<Transactions[]>
  >(`/api/transactions?page=${pageParam}&pageSize=10`);

  console.log("[transactions] data: ", JSON.stringify(data));

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const nextPage = JSON.parse(headers["x-pagination"]!).NextPage;
  return { ...data, nextPage };
};

export function useTransactions() {
  return useInfiniteQuery(["transactions"], getTransactions, {
    getNextPageParam: (lastPage) => {
      return lastPage.nextPage ?? undefined;
    },
  });
}

If I add some console logs in the component, I see the following output. The mocked data is successfully returned, but useInfiniteQuery doesn't run again. I checked with the other working tests on useQuery and it indeed first loads and then returns the mocked data.

Any idea on how to fix it? Thanks :)

 console.log
    [inside component] data:  undefined

  console.log
    [inside component] status:  loading

  console.log
    [inside component] error:  null

  console.log
    [inside component] isFetching:  true

  console.log
    [inside fetching function] data:  {"pages":[{"data":{"value":[{"transactionCode":"3", ...}]},"headers":{"x-pagination":"{\"TotalCount\":5,\"PageSize\":10,\"CurrentPage\":1,\"PreviousPage\":null,\"NextPage\":null,\"TotalPages\":1}"}}],"pageParams":[]}

[alessandrocapra]

Solved it, it was a misunderstanding on how to pass the response headers through MSW but I figured that out, can be closed.

[tomarcher101]

I'm having the same issue! What exactly was the fix?

[alessandrocapra]

In my particular implementation of the backend side, I was supposed to pass a particular header, which I was doing in the real implementation but not moving correctly in msw. It’s been 2 years now and I can’t remember exactly, but something about setting the headers as they were in reality in the msw mock, so that the loading of the next page would work properly

[tomarcher101]

Cheers @alessandrocapra, I found the issue! For anyone reading this, for me it was to do with the Link header not being present. The useInfiniteQuery query seemed to be perpetually stuck in the isFetching state unless it was included in the mocked response, even as just an empty string! I don't know whether this is always the case, but the app I am building tests is using cursor pagination which relies on the header.

It wasn't popping an error though which made this super hard to debug!

The working MSW handler ended up looking like so:

http.get("/mockedurl", () => {
    const response = HttpResponse.json(
      {
        data,
      },
      {
        headers: {
          link: "",
        },
      }
    );
    return response;
  })