T
TanStack•3y ago
plain-purple

`No QueryClient set, use QueryClientProvider` jest test error despite passing queryClient

Hi folks. I'm on React 18 and react-query 4.22.4 and I am trying to get started with jest testing. I've written a custom hook that uses useQuery and looks like this: 
export const useCheckTokenPermissions = () => {
  const queryKey = ["auth"]
  const params = {
    checks: {
      readAllApiKeys: {
        object: {
          resource_type: "api_key",
        },
        action: "read",
      },
    },
  }
  return useQuery({
    queryKey,
    queryFn: () => checkAuthorization(params),
  })
}
export const useCheckTokenPermissions = () => {
  const queryKey = ["auth"]
  const params = {
    checks: {
      readAllApiKeys: {
        object: {
          resource_type: "api_key",
        },
        action: "read",
      },
    },
  }
  return useQuery({
    queryKey,
    queryFn: () => checkAuthorization(params),
  })
}
Which is working well. I am trying to write a test for my feature, and that looks like this: 
// testHelpers.ts
export const render = (component: ReactElement): RenderResult => {
  return render(<AppProviders>{component}</AppProviders>)
}

// app.tsx
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      cacheTime: 0,
      refetchOnWindowFocus: false,
    },
  },
})

export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
  return (
    <HelmetProvider>
      <ThemeProvider theme={dark}>
        <CssBaseline />
        <ErrorBoundary>
          <QueryClientProvider client={queryClient}>
            <AuthProvider>
              {children}
              <GlobalSnackbar />
            </AuthProvider>
          </QueryClientProvider>
        </ErrorBoundary>
      </ThemeProvider>
    </HelmetProvider>
  )
}

// brokenTest.test.tsx
it("shows a toggle switch if user has read all permissions", async () => {
    const MockReadAllTokenPermissions: AuthorizationResponse = {
      readAllApiKeys: true,
    }
    server.use(
      rest.get("/api/v2/authcheck", (req, res, ctx) => {
        return res(ctx.status(200), ctx.json(MockReadAllTokenPermissions))
      }),
    )
    const { container } = render(<TokensPage />)
    const { result } = renderHook(() => useCheckTokenPermissions(), {
      container,
    })
    await waitFor(() => expect(result.current.isSuccess).toBe(true))
    ...
// testHelpers.ts
export const render = (component: ReactElement): RenderResult => {
  return render(<AppProviders>{component}</AppProviders>)
}

// app.tsx
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      cacheTime: 0,
      refetchOnWindowFocus: false,
    },
  },
})

export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
  return (
    <HelmetProvider>
      <ThemeProvider theme={dark}>
        <CssBaseline />
        <ErrorBoundary>
          <QueryClientProvider client={queryClient}>
            <AuthProvider>
              {children}
              <GlobalSnackbar />
            </AuthProvider>
          </QueryClientProvider>
        </ErrorBoundary>
      </ThemeProvider>
    </HelmetProvider>
  )
}

// brokenTest.test.tsx
it("shows a toggle switch if user has read all permissions", async () => {
    const MockReadAllTokenPermissions: AuthorizationResponse = {
      readAllApiKeys: true,
    }
    server.use(
      rest.get("/api/v2/authcheck", (req, res, ctx) => {
        return res(ctx.status(200), ctx.json(MockReadAllTokenPermissions))
      }),
    )
    const { container } = render(<TokensPage />)
    const { result } = renderHook(() => useCheckTokenPermissions(), {
      container,
    })
    await waitFor(() => expect(result.current.isSuccess).toBe(true))
    ...
2 Replies
plain-purple
plain-purpleOP•3y ago
As you can see, I am passing a valid queryClient - the same query client that successfully works in production. I just can't get it to work in my test. Any ideas where I'm going wrong?
fair-rose
fair-rose•3y ago
It might be because the queryClient is created outside of the tests. Does it work if you create it inside your test and pass it to render() ? See for example: https://tkdodo.eu/blog/testing-react-query
Testing React Query
Let's take a look at how to efficiently test custom useQuery hooks and components using them.

Did you find this page helpful?