使用 Jest 掌握模擬 API 呼叫：綜合教學

使用 Jest 模擬 API 呼叫對於編寫高效、快速且可靠的測試至關重要。本教學將引導您了解使用 Jest 的廣泛程式庫和進階場景適配器來控制模擬響應的基本技術。

在為進行 API 呼叫的程式碼編寫測試時，模擬這些呼叫非常重要。此策略可確保您的測試可靠、快速且獨立於外部服務。 Jest 是一種流行的 JavaScript 測試框架，它提供了多種方法來輕鬆模擬 API 呼叫。讓我們來探索一下您可以使用的各種方法。

使用 jest.mock()

在 Jest 中模擬 API 呼叫的一種直接方法是使用 jest.mock() 函數來模擬發出 API 請求的整個模組。這是一個例子：

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

export const getUsers = () => {
  return axios.get('/users');
};

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

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

在這個範例中，我們使用 jest.mock('axios') 自動模擬整個 axios 模組。然後，我們使用 axios.get.mockResolvedValueOnce() 來模擬下一個 axios.get 呼叫的回應。我們的測試驗證 API 是否被正確呼叫並傳回模擬資料。

使用手動模擬

另一種方法是透過建立 __mocks__ 資料夾並在其中放入模擬實作檔案來手動模擬進行 API 呼叫的模組：

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

現在在您的測試中，您可以為每個測試模擬不同的回應：

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

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

透過這個手動模擬，您可以完全控制並可以使用您自己的實作來模擬不同的 Axios 方法，例如 get 和 post。

使用 axios-mock-adapter

對於 Axios 請求的更進階模擬，您可以使用 axios-mock-adapter 函式庫。首先，安裝它：

npm install axios-mock-adapter --save-dev

然後在您的測驗中：

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;

  beforeAll(() => {
    mock = new MockAdapter(axios);
  });

  afterEach(() => {  
    mock.reset();
  });

  test('returns users data', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);

    const result = await getUsers();

    expect(result.data).toEqual(users);  
  });
});

使用 axios-mock-adapter，您可以根據 URL、參數、標頭等來模擬請求。您還可以模擬錯誤和超時。

注入模擬的 Axios 實例

如果您的程式碼直接使用 axios，另一個選擇是在測試期間將模擬的 axios 實例注入到您的程式碼中：

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

export const getUsers = () => {
  return axios.get('/users');
};

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

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

在這裡，我們模擬 axios 本身，而不是整個模組，並提供我們自己的模擬 get 函數。

模擬 API 呼叫的技巧

以下是在 Jest 中模擬 API 呼叫時要記住的一些提示：

1. 在測試之間重置模擬：使用 beforeEach 和 afterEach 確保測試是獨立的。
2. 僅模擬必要的函數：避免過多模擬。專注於您的程式碼實際使用的函數和模組。
3. 測試失敗案例：模擬錯誤和意外回應，以測試程式碼如何處理失敗。
4. 可重複使用模擬裝置：為常見 API 回應建立可重複使用模擬裝置。

使用 EchoAPI 模擬 API

EchoAPI是一款優秀的API介面設計、除錯與測試工具。它透過提供一個整合環境來簡化開發流程，開發人員可以在其中有效率地建立、測試和驗證 API。 EchoAPI 的一項關鍵功能是支援模擬服務，讓開發人員模擬 API 回應以進行有效測試。以下是如何在 EchoAPI 中設定模擬 API：

1. 建立一個新的HTTP請求

將 URL 定義為 /echoapi/login。

2. 設定預期響應

前往設計部分並配置預期回應。

要成功回應，請如下設定 JSON：

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

export const getUsers = () => {
  return axios.get('/users');
};

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

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });

  const result = await getUsers();

  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

對於失敗回應，請如下設定 JSON：

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

3. 配置模擬觸發條件

在Mock部分，設定請求體的觸發條件。如果“email”=“test@echoapi.com”且“password”=“123456”，請選擇預期回應“成功”。對於所有其他條件，選擇“失敗”作為預期回應。

4. 啟動模擬模式

在發送此 API 請求之前啟用模擬服務並切換到模擬環境。

前端開發

在前端開發中使用模擬 API 可讓您立即處理功能，而無需等待後端準備就緒。這種並行開發方法加快了整個流程。

自動化測試

模擬 API 為自動化測試提供一致的回應，使編寫可靠的測試變得更加容易。 Jest 和 Cypress 等工具可以與類比 API 整合來測試各種元件和流程。

原型製作

創建原型或概念證明時，模擬 API 可以快速設定必要的後端交互，而無需建立實際的後端服務。

結論

模擬 API 呼叫是編寫可靠且快速的測試的基本技能，尤其是在處理外部依賴項時。 Jest 提供了多種模擬 API 呼叫的方法，從使用 jest.mock() 模擬整個模組、手動模擬模組，到使用 axios-mock-adapter 等函式庫來實現更進階的情況。關鍵是根據您的需求選擇正確的方法，同時保持測試獨立並專注於正在測試的程式碼。

此外，EchoAPI 提供了強大的工具來模擬 API，從而增強您的開發和測試工作流程。透過掌握這些技術，您可以編寫彈性測試並保持高效、有效的 API 互動。

那為什麼要等呢？立即開始使用這些模擬技術和工具（例如 EchoAPI）來改善您的開發工作流程！

以上是使用 Jest 掌握模擬 API 呼叫：綜合教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！