如何在创建react应用程序中使用JEST测试/模拟API调用

npx create-react-app my-app
cd my-app

const axios = {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // 添加其他需要的HTTP方法
};

export default axios;

import axios from 'axios';

class MyComponent extends React.Component {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        // 处理数据
      })
      .catch(error => {
        // 处理错误
      });
  }

  // 其他组件代码
}

import axios from 'axios';

class MyComponent extends React.Component {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        // 处理数据
      })
      .catch(error => {
        // 处理错误
      });
  }

  // 其他组件代码
}

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

jest.mock('axios');

test('fetches data and renders it correctly', async () => {
  const mockData = { name: 'John Doe' };
  axios.get.mockResolvedValueOnce({ data: mockData });

  render(<MyComponent />);

  // 等待数据加载完成
  await screen.findByText(mockData.name);

  // 断言组件正确渲染了数据
  expect(screen.getByText(mockData.name)).toBeInTheDocument();
});