如何在react中测试异步调用后的状态更新和组件重现

import { render, waitFor, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('should update state after async call', async () => {
  render(<MyComponent />);
  
  // 模拟异步调用
  fetchData();
  
  // 等待异步操作完成
  await waitFor(() => screen.getByText('Data loaded'));
  
  // 断言状态更新后的组件渲染
  expect(screen.getByText('Data loaded')).toBeInTheDocument();
});

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { render, waitFor, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ data: 'mocked data' }));
  })
);

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

test('should update state after async call', async () => {
  render(<MyComponent />);
  
  // 等待异步操作完成
  await waitFor(() => screen.getByText('Data loaded'));
  
  // 断言状态更新后的组件渲染
  expect(screen.getByText('Data loaded')).toBeInTheDocument();
});