测试用例：

import React, { useState, useEffect } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('https://jsonplaceholder.typicode.com/posts/1', (req, res, ctx) => {
    return res(
      ctx.json({
        userId: 1,
        id: 1,
        title: 'Test Title',
        body: 'Test Body',
      })
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      const json = await response.json();
      setData(json);
    }
    fetchData();
  }, []);

  return (
    

      {data ? (
        

          
{data.title}
          
{data.body}
        
      ) : (
        
Loading...
      )}
    
  );
}

describe('MyComponent', () => {
  it('fetches data and renders correctly', async () => {
    render();

    await waitFor(() => expect(screen.getByText('Test Title')).toBeInTheDocument());
    expect(screen.getByText('Test Body')).toBeInTheDocument();
    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
  });
});

本例中，我们编写了一个组件MyComponent，它使用了Fetch API和useState的useEffect来获取数据并显示在页面上。我们使用了@testing-library/react和msw来编写测试用例。

在测试用例中，我们使用setupServer来创建一个服务器并通过rest.get来定义我们要拦截的HTTP请求。我们使用了beforeAll和afterAll来启动和关闭服务器，而使用afterEach来重置我们的