Testing tanstack-react-qiery - (wait for is not a function in renderHook)

Question

I want to test this customHook but it's showing me an error of waitFor is not a function.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook } from "@testing-library/react";
import { useCustomHookForTestCase } from "../useQueryCustomHook";
const queryClient = new QueryClient();

// jest.mock('../../../Utilies/Apicall')

describe('Testing custom hooks of react query', () => {
    const wrapper = ({ children }) => (
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    );

    it('Should get data of todos from api',async () => {
        const { result, waitFor } = await renderHook(() => useCustomHookForTestCase(), { wrapper });

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

        expect(result.current.data).toEqual("Hello");
    })
})

export function useCustomHookForTestCase() {
  return useQuery(['customHook'], () => 'Hello');
}

score 2 · Accepted Answer · answered Jul 27 '22 at 10:59

only renderHook from react-hook-testing-library returns a waitFor method. It is not available if you use the one from @testing-library/react-hooks. For that to work, you just need to import waitFor directly. You also can't return a boolean directly, but it needs to be a promise:

import { renderHook, waitFor } from '@testing-library/react'

await waitFor(() => expect(result.current.isSuccess).toBe(true))

Testing tanstack-react-qiery - (wait for is not a function in renderHook)

1 Answers1