TypeError: _reactQuery.QueryClient is not a constructor

QueryClient is not a constructor when write a unit test with jest

import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient({
  defaultOptions: {
      queries: {
          retry: 2,
      },
  },
});


export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Dashboard />
    </QueryClientProvider>
  );
}

export default App;

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5

Top GitHub Comments

5reactions

TkDodocommented, May 2, 2021

You asked the same on stackoverflow: https://stackoverflow.com/questions/67354617/typeerror-reactquery-default-is-not-a-constructor

3reactions

broadhu2commented, Aug 17, 2022

In my case, this error message was related to an improper jest.mock that I had added earlier.

The fix was to change this:

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

jest.mock("@tanstack/react-query", () => ({
  useQuery: () => ({ isLoading: false, error: {}, data: [] }),
}));

to the following:

import * as ReactQuery from "@tanstack/react-query";

jest.mock("@tanstack/react-query", () => {
  const original: typeof ReactQuery = jest.requireActual("@tanstack/react-query");

  return {
    ...original,
    useQuery: () => ({ isLoading: false, error: {}, data: [] }),
  };
});

My initial block of code overrides the entire module, when my intent was just to override the useQuery function and retain the rest. Hope this helps someone else who might be stuck on this!

Top Results From Across the Web

react-query useQueryClient is not a function in Jest or ...

Second situation: Type error react_query_1.QueryClient is not a constructor. The scenario is: I have react-query configured in a next-js project ...

QueryClient in react-query is not a constructor when ... - GitHub

bug report I built this code without --no-scope-hoist $ parcel build public/index.html import { QueryClient } from "react-query"; export const queryClient ...

Migrating to React Query 3 - TanStack

It returns the provided queryClient for its component tree and shouldn't need much tweaking beyond a rename. Query key parts/pieces are no longer...

What I learned from React-Query, and why I won't use it again

We think that such a process should not be managed within the component. It affects the entire app, even beyond (the Iframe), and...

Testing React Query | TkDodo's blog

Let's take a look at how to efficiently test custom useQuery hooks and components using them.