Data Not Resolving When Running useQuery in a Jest Test Environment

[DovahBrownies]

Hello!

I have the following component that works as intended:

MyComponent.tsx

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const MyComponent = () => {

  const { isLoading, error, data } = useQuery({
    queryKey: ["repoData"],
    queryFn: () => axios
    .get("https://api.github.com/repos/tannerlinsley/react-query")
    .then(res => {
      console.log("LOG | axios res:", res?.data?.results);
      return res?.data;
    }),
  });

  console.log("LOG | data:", data);
  console.log("LOG | error:", error);
  console.log("LOG | isLoading:", isLoading);

  return <></>;
};

export default MyComponent;

And I am trying to write a unit test for it, using React Testing Library & Jest, by mocking an axios instance and returning test data:

MyComponent.test.tsx

import { render, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import MyComponent from "./MyComponent";

var axiosMock = new MockAdapter(axios);
const mockQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      staleTime: Infinity,
      cacheTime: Infinity,
      structuralSharing: false
    },
  },
});

describe("MyComponent", () => {
  beforeEach(() => {
    axiosMock.onGet("https://api.github.com/repos/tannerlinsley/react-query").reply(200, {
      results: [{ id: 1, name: "John Smith" }],
    });
  });

  it("returns the proper mock data", async () => {
    const { container } = render(
      <QueryClientProvider client={mockQueryClient}>
        <MyComponent />
      </QueryClientProvider>
    );

    await new Promise(process.nextTick);
    await waitFor(() => expect(container).toBeEmptyDOMElement());
  });
});

But when I run this test:

• LOG | data is undefined
• LOG | error is null
• LOG | isLoading is true
• But LOG | axios res returns the proper mock data

It seems like whatever I try to do, I can't get useQuery to return a proper response in data, and isLoading is always stuck on true.

Is there anything I'm missing to get this working in my test environment? Any hints would be greatly appreciated!

[TkDodo]

checkout the repo at the end of my blopost about testing: https://tkdodo.eu/blog/testing-react-query

• https://github.com/TkDodo/testing-react-query

It has working tests for both components and custom hooks with jest and react-testing-library.

[DovahBrownies]

I skimmed through your blogpost a few times but I didn't open the Github repo. This was exactly it.

Thank you!