Testing error case with React Testing Library stuck in loading phase

[moisesgarcia-wolt]

Hi everyone! I'm trying to test the error-case flow for a custom hook that wraps a call to useQuery, but for some reason the result never gets passed the loading phase (isLoading is true and error is null).

This is basically the structure of my app. I'm mocking the fetcher function to return a specific error as follows:

// The fetcher
const myFetcherFn = () => {
  // An API call 
}

// The hook
const myCustomHook = (myParam: String) ={
  const {isLoading, isError, error, data  } = useQuery({
    queryFunction: () => myFetcherFn(myParam),
    retry: (failureCount, error) => {
      // Some custom retry logic
    }
    ...
  });

  return { isLoading, isError, error, data };
}

// The component that calls myCustomHook
const MyComponent = () => {
  const {isLoading, isError, error, data} = myCustomHook(myParam);

  // Do something
}

// The test
import { renderHook, waitFor } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { myCustomHook } from "/src/myCustomHook.ts";
import * as api from "/src/api.ts";

it("Does something when error", async () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // ✅ turns retries off
        retry: false,
      },
    }
  });

  const myFetcherFnSpy = vi.spyOn(api, "myFetcherFn");

  myFetcherFnSpy.mockRejectedValue(
      // Some specific error shape
  );

  render(<MyComponent />);

  const { result } = renderHook(
    () => myCustomHook(myParam),
    { wrapper: ({ children }: { children: ReactNode }) => (
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
      ) },
  );

  await waitFor(() => result.current.error);

  // Write some assertions
});

Now, regarding the problem of the hook not moving beyond the loading phase, the most important things to highlight are:

• Even if I remove the custom retry logic (or simply return false from it) and leave the call to useQuery to be as barebones as possible, the error will still not be returned.
• If I log the error from the retry function, I can definitely see it. It's just that the test never progresses the hook to actually return it.
• The call to waitFor is non-blocking. I would expect that awaiting await waitFor(() => result.current.error) would wait until result.current.error is not null, but for some reason the test progresses no matter what, causing my assertions to fail.

I've run out of ideas tbh. Hopefully someone can spot something obvious and help out! 🙏

[moisesgarcia-wolt]

Just fixed it. The first thing I had to do was to have an expectation inside the call to waitFor to make sure that the test didn't progress any further:

await waitFor(() => {
  expect(result.current.error).not.toBeNull();
});

The second thing was to fix the logic for the retry function. It was calling a function that would return boolean | undefined, and that undefined was making things harder to debug.

Thanks for the rubber-ducking 😄.