Jest框架中模擬HTTP請求

在Jest框架中，我們可以使用jest.mock()方法來模擬HTTP請求

1. 首先，安裝axios庫：

npm install axios

2. 創建一個名為api.js的文件，其中包含一個使用axios發送GET請求的函數：

// api.js
import axios from 'axios';

export async function fetchData(url) {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

3. 創建一個名為api.test.js的測試文件：

// api.test.js
import axios from 'axios';
import { fetchData } from './api';

jest.mock('axios');

describe('fetchData', () => {
  it('should return data from the API', async () => {
    const url = 'https://api.example.com/data';
    const expectedData = { key: 'value' };

    // 模擬axios.get()返回的Promise
    axios.get.mockResolvedValue({ data: expectedData });

    const data = await fetchData(url);

    expect(axios.get).toHaveBeenCalledWith(url);
    expect(data).toEqual(expectedData);
  });

  it('should handle errors', async () => {
    const url = 'https://api.example.com/data';
    const errorMessage = 'Network Error';

    // 模擬axios.get()返回的Promise
    axios.get.mockRejectedValue(new Error(errorMessage));

    try {
      await fetchData(url);
    } catch (error) {
      expect(axios.get).toHaveBeenCalledWith(url);
      expect(error.message).toEqual(errorMessage);
    }
  });
});

在這個例子中，我們使用jest.mock('axios')來模擬axios庫。然后，在測試用例中，我們使用axios.get.mockResolvedValue()和axios.get.mockRejectedValue()來模擬成功和失敗的HTTP請求。這樣，我們就可以在不實際發送網絡請求的情況下測試fetchData函數。