How can I test the useFetch hook in my React application?

How can I test the useFetch hook in my React application?

You can test the useFetch hook by using a testing library like React Testing Library along with Jest.

Can you provide a code example for that?

Sure! Here's a simple example:

import { render, screen } from '@testing-library/react';
import { useFetch } from './useFetch';

const TestComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;
  return <div>{data.title}</div>;
};

test('fetches and displays data', async () => {
  render(<TestComponent />);
  expect(screen.getByText(/loading/i)).toBeInTheDocument();
  const dataElement = await screen.findByText(/data title/i);
  expect(dataElement).toBeInTheDocument();
});

What if the fetch fails?

You can simulate a fetch failure by mocking the fetch function to throw an error. Here's how you can do that:

jest.mock('./useFetch', () => ({
  useFetch: jest.fn(() => ({ data: null, error: new Error('Fetch failed') }))
}));

test('handles fetch error', () => {
  render(<TestComponent />);
  expect(screen.getByText(/error/i)).toBeInTheDocument();
});