TIL: 커스텀훅 테스트 코드

import { useEffect, useState } from 'react';
import { customFetch, FetchProps } from '@services/apis/apis';

export const useData = <R, B>(fetchProps: FetchProps<B>): R | null => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const fetchedData = await customFetch(fetchProps);
        if (fetchedData && fetchedData.error) {
          console.error(`Error: ${fetchedData.error}`);
          return null;
        }
        setData(fetchedData);
      } catch (error) {
        if (error instanceof Error) {
          console.error(`Error: ${error.message}`);
        }
      }
    };

    fetchData();
  }, []);

  return data;
};

export default useData;

import { renderHook } from '@testing-library/react-hooks';
import { FetchProps, customFetch } from '@services/apis/apis';
import useData from './useData';

jest.mock('@services/apis/apis', () => ({
  customFetch: jest.fn(),
}));

test('useData를 호출하면 정상적으로 data를 리턴해야 한다.', async () => {
  const fakeData = { data: { test: 'test' } };

  (customFetch as jest.Mock).mockResolvedValue(fakeData);

  const fetchProps: FetchProps<null> = {
    method: 'GET',
    path: '/path',
  };

  const { result, waitForNextUpdate } = renderHook(() => useData(fetchProps));
  await waitForNextUpdate();
  expect(result.current).toEqual(fakeData);
});