如何在react中编写异步方法的单元测试用例？

// MyComponent.js
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  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 ? data.message : 'Loading...'}</div>
  );
};

export default MyComponent;

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

describe('MyComponent', () => {
  it('should render data after fetching', async () => {
    const mockData = { message: 'Hello, World!' };
    jest.spyOn(global, 'fetch').mockResolvedValue({
      json: jest.fn().mockResolvedValue(mockData),
    });

    let container;
    await act(async () => {
      container = render(<MyComponent />).container;
    });

    expect(container.textContent).toBe(mockData.message);
    expect(global.fetch).toHaveBeenCalledTimes(1);
    expect(global.fetch).toHaveBeenCalledWith('https://api.example.com/data');

    global.fetch.mockRestore();
  });
});