useFetch.js

import { useEffect, useState } from 'react';

export default function useFetch(apiUrl) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getData = async (url) => {
      setLoading(true);
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);

        return data;
      } catch(e) {
        setError(e);

        return e;
      } finally {
        setLoading(false);
        return;
      }
    }

    getData(apiUrl);
  }, [apiUrl]);


  return {data, loading, error};
};

useFetch.test.js

import { renderHook } from '@testing-library/react-hooks'
import useFetch from './useFetch';

const DATA_MOCK = {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
};

describe('useFetch', () => {
  beforeAll(() => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve({
          "userId": 1,
          "id": 1,
          "title": "delectus aut autem",
          "completed": false
        }),
      })
    );
  });


  afterAll(() => {    
    global.fetch.mockClear();
  });

  
  test('should return default values', async () => {
      const { result, waitForNextUpdate } = renderHook(() => useFetch('https://jsonplaceholder.typicode.com/todos/1'));
      const { data, loading, error } = result.current;
  
      expect(loading).toBeTruthy();
  
      await waitForNextUpdate();
  
      expect(data).toBeNull();
      expect(error).toBeNull();
  });
  
  test('should return data', async () => {
      const { result, waitForNextUpdate } = renderHook(() => useFetch('https://jsonplaceholder.typicode.com/todos/1'));
  
      await waitForNextUpdate();

      console.log(result.current);
      // console.log
      // {
      //   data: null,
      //   loading: false,
      //   error: TypeError: Cannot read property 'json' of undefined
      //       at getData (/Users/kkowalczuk/Documents/Moje/RTL/random-components-practice/src/hooks/useFetch/useFetch.js:13:37)
      // }
  
      expect(result.current.data).toBeTruthy();  // problem
      expect(result.current.data).toMatchObject(DATA_MOCK);
      expect(result.current.loading).toBeFalsy();
      expect(result.current.error).toBeNull();
  });
  
  test('should return error message', async () => {
      const { result, waitForNextUpdate } = renderHook(() => useFetch('https://foobar.typicode.com/todos/1'));
      
      expect(result.current.error).toBe(null);
  
      await waitForNextUpdate();
  
      expect(result.current.data).toBeNull();
      expect(result.current.loading).toBe(false);
      expect(result.current.error).toBeTruthy();
  });

});