Test react-query with jest

we will to implement the react-query on jest testing

first, make component which in there are request to rest api using react query

UserList.jsx

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

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const UserList = () => {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

after create component we will to create unit testing, please paste below code to editor

user-component-test.js

import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { useQuery } from 'react-query';
import UserList from './UserList';

// Mock the useQuery hook
jest.mock('react-query');

describe('UserList', () => {
  // Create a QueryClient for the test
  const queryClient = new QueryClient();

  it('displays loading state initially', () => {
    // Simulate loading state by returning an object with isLoading as true
    useQuery.mockReturnValue({
      data: null,
      error: null,
      isLoading: true,
    });

    render(
      <QueryClientProvider client={queryClient}>
        <UserList />
      </QueryClientProvider>
    );

    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('displays error message when there is an error', () => {
    // Simulate error state by returning an error
    useQuery.mockReturnValue({
      data: null,
      error: { message: 'Network response was not ok' },
      isLoading: false,
    });

    render(
      <QueryClientProvider client={queryClient}>
        <UserList />
      </QueryClientProvider>
    );

    expect(screen.getByText('Error: Network response was not ok')).toBeInTheDocument();
  });

  it('displays users when data is fetched successfully', async () => {
    // Simulate a successful fetch with user data
    useQuery.mockReturnValue({
      data: [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' },
      ],
      error: null,
      isLoading: false,
    });

    render(
      <QueryClientProvider client={queryClient}>
        <UserList />
      </QueryClientProvider>
    );

    // Wait for the data to appear
    await waitFor(() => screen.getByText('John Doe'));
    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });
});