使用Jest对ReactJS组件中的异步渲染进行单元测试

// Component.js

import React, { useState, useEffect } from 'react';

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default Component;

// Component.test.js

import React from 'react';
import { render, act } from '@testing-library/react';
import Component from './Component';

jest.mock('node-fetch'); // 模拟fetch函数

describe('Component', () => {
  it('renders data correctly after async fetch', async () => {
    const mockData = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
    ];

    jest.spyOn(global, 'fetch').mockResolvedValue({
      json: jest.fn().mockResolvedValue(mockData),
    });

    let component;

    await act(async () => {
      component = render(<Component />);
    });

    expect(component.getByText('Item 1')).toBeInTheDocument();
    expect(component.getByText('Item 2')).toBeInTheDocument();
  });
});