UseEffect挂钩的Jest测试用例

import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { renderHook } from '@testing-library/react-hooks';
import useFetchData from './useFetchData';

describe('useFetchData', () => {
  let container = null;

  beforeEach(() => {
    // 设置DOM元素作为渲染目标
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    // 清理渲染的组件
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it('should fetch data and update state', async () => {
    const url = 'https://api.example.com/data';
    const mockData = { id: 1, name: 'John Doe' };

    // 模拟异步数据获取
    jest.spyOn(global, 'fetch').mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.resolve(mockData),
      })
    );

    // 渲染组件
    await act(async () => {
      render(<TestComponent url={url} />, container);
    });

    // 断言数据是否被正确更新
    expect(container.textContent).toBe(JSON.stringify(mockData));

    // 恢复全局fetch函数
    global.fetch.mockRestore();
  });

  it('should clean up on unmount', async () => {
    const cleanupFn = jest.fn();

    // 渲染组件
    const { unmount } = renderHook(() => useFetchData(url, cleanupFn));

    // 卸载组件
    unmount();

    // 断言清理函数是否被调用
    expect(cleanupFn).toHaveBeenCalled();
  });

  it('should trigger effect on dependency change', async () => {
    const url = 'https://api.example.com/data';
    const mockData = { id: 1, name: 'John Doe' };

    // 模拟异步数据获取
    jest.spyOn(global, 'fetch').mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.resolve(mockData),
      })
    );

    // 渲染组件
    const { rerender } = renderHook(({ url }) => useFetchData(url), {
      initialProps: { url },
    });

    // 修改依赖项并重新渲染
    rerender({ url: 'https://api.example.com/updated-data' });

    // 断言数据是否被正确更新
    expect(container.textContent).toBe(JSON.stringify(mockData));

    // 恢复全局fetch函数
    global.fetch.mockRestore();
  });
});