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

Question

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