How can I test React custom hook with RTL which uses react- query ?

In React projects, using the React Query library efficiently handles asynchronous data, such as API calls. When developing custom hooks, integrating React Query enables data state management and caching strategies. To ensure the reliability and stability of custom hooks, appropriate testing is essential. Here, I will introduce how to use React Testing Library (RTL) to test React custom hooks that integrate with React Query.

1. Preparation of Test Environment

First, install @testing-library/react-hooks and react-query so you can use React Query and React Testing Library in your tests.

bash
npm install @testing-library/react-hooks react-query

2. Building Custom Hooks

Assume we have a custom hook useFetchData that uses React Query to fetch data from an API:

javascript
import { useQuery } from 'react-query';

function useFetchData(url) {
  return useQuery('data', () => fetch(url).then(res => res.json()));
}

3. Setting Up React Query Test Environment

Since React Query relies on a provider, we need to simulate this environment in tests. We can use QueryClient and QueryClientProvider to do so:

javascript
import { QueryClient, QueryClientProvider } from 'react-query';
import { renderHook } from '@testing-library/react-hooks';

const queryClient = new QueryClient();

const wrapper = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);

4. Writing Test Cases

Now we can start writing test cases. When testing custom hooks, we can use the renderHook function. To mock API responses, use jest-fetch-mock to capture and return custom responses:

javascript
import { renderHook } from '@testing-library/react-hooks';
import fetchMock from 'jest-fetch-mock';

fetchMock.enableMocks();

beforeEach(() => {
  fetchMock.resetMocks();
});

it('should fetch data', async () => {
  fetchMock.mockResponseOnce(JSON.stringify({ data: "Test data" }));

  const { result, waitFor } = renderHook(() => useFetchData('https://api.example.com/data'), { wrapper });

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

  expect(result.current.data).toEqual({ data: "Test data" });
});

5. Handling and Asserting States

React Query's state management includes isLoading, isError, isSuccess, and other states. These states can be used to assert different return cases of the hook. In the above example, we use waitFor to wait for the query state to become successful, then assert the returned data.

Summary

By following these steps, we can effectively test custom hooks integrated with React Query using RTL. This approach not only helps verify the logical correctness of the hooks but also ensures they work properly in real applications. Testing is a critical step for ensuring software quality, especially when dealing with asynchronous data and external APIs.