How can I test the custom fetch hook with dummy data?

450 Views Asked by At

I have a custom fetch hook. It is not doing a real fetch process.

It's an implantation example. I want to write a proper test for it.

This is the pseudo API.

import { data } from './data';
import { IProduct } from '../common/types';

// pseudo API
export const getProducts = (): Promise<IProduct[]> => {
  return new Promise((resolve, reject) => {
    if (!data) {
      return setTimeout(() => reject(new Error('data not found')), 1000);
    }
    setTimeout(() => resolve(data), 1000);
  });
};

Here is the useFetch.ts

import { useEffect, useState } from 'react';
import { getProducts } from '../api/api';
import { IProduct } from '../common/types';

export const useFetch = () => {
  const [products, setProducts] = useState<IProduct[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>(null);

  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      try {
        const res = await getProducts();
        const categories = Array.from(new Set(res.map((r) => r.category)));
        setProducts(res);
        setCategories(categories);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  return { products, categories, loading, error };
};

Here is the useFetch.test.ts

import { renderHook } from '@testing-library/react-hooks';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { data } from '../api/data';

import { useFetch } from './useFetch';

const server = setupServer(
  rest.get('/api', (req, res, ctx) => {
    return res(ctx.json(data));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('gets the data', async () => {
  const { result, waitForNextUpdate } = renderHook(() => useFetch());

  await waitForNextUpdate();

  expect(result.current).toEqual(data);
});

How can I write a proper test for this case?

I'm getting the received, expected error.

expect(received).toEqual(expected) // deep equality

0

There are 0 best solutions below