如何使用虚拟数据测试自定义获取钩？

Question

我有一个自定义的获取钩。它不是真正的提取过程。

这是一个植入示例。我想为此编写适当的测试。

这是伪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);
  });
};

这是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 };
};

这是usefeth.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);
});

如何为这种情况编写适当的测试？

我会收到收到的预期错误。

期望（收到）.Toequal（预期）//深层平等