使用 Jest 模擬 API 呼叫對(duì)於編寫高效、快速且可靠的測試至關(guān)重要。本教學(xué)將引導(dǎo)您了解使用 Jest 的廣泛程式庫和進(jìn)階場景適配器來控制模擬響應(yīng)的基本技術(shù)。

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

使用 jest.mock()

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

// 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);
});

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

使用手動(dòng)模擬

另一種方法是透過建立 __mocks__ 資料夾並在其中放入模擬實(shí)作檔案來手動(dòng)模擬進(jìn)行 API 呼叫的模組：

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

現(xiàn)在在您的測試中，您可以為每個(gè)測試模擬不同的回應(yīng)：

// 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);
});

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

使用 axios-mock-adapter

對(duì)於 Axios 請(qǐng)求的更進(jìn)階模擬，您可以使用 axios-mock-adapter 函式庫。首先，安裝它：

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

然後在您的測驗(yàn)中：

// 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，您可以根據(jù) URL、參數(shù)、標(biāo)頭等來模擬請(qǐng)求。您還可以模擬錯(cuò)誤和超時(shí)。

注入模擬的 Axios 實(shí)例

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

// 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 本身，而不是整個(gè)模組，並提供我們自己的模擬 get 函數(shù)。

模擬 API 呼叫的技巧

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

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

使用 EchoAPI 模擬 API

EchoAPI是一款優(yōu)秀的API介面設(shè)計(jì)、除錯(cuò)與測試工具。它透過提供一個(gè)整合環(huán)境來簡化開發(fā)流程，開發(fā)人員可以在其中有效率地建立、測試和驗(yàn)證 API。 EchoAPI 的一項(xiàng)關(guān)鍵功能是支援模擬服務(wù)，讓開發(fā)人員模擬 API 回應(yīng)以進(jìn)行有效測試。以下是如何在 EchoAPI 中設(shè)定模擬 API：

1. 建立一個(gè)新的HTTP請(qǐng)求

將 URL 定義為 /echoapi/login。

2. 設(shè)定預(yù)期響應(yīng)

前往設(shè)計(jì)部分並配置預(yù)期回應(yīng)。

要成功回應(yīng)，請(qǐng)如下設(shè)定 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);
});

對(duì)於失敗回應(yīng)，請(qǐng)如下設(shè)定 JSON：

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

3. 配置模擬觸發(fā)條件

在Mock部分，設(shè)定請(qǐng)求體的觸發(fā)條件。如果“email”=“test@echoapi.com”且“password”=“123456”，請(qǐng)選擇預(yù)期回應(yīng)“成功”。對(duì)於所有其他條件，選擇“失敗”作為預(yù)期回應(yīng)。

4. 啟動(dòng)模擬模式

在發(fā)送此 API 請(qǐng)求之前啟用模擬服務(wù)並切換到模擬環(huán)境。

前端開發(fā)

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

自動(dòng)化測試

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

原型製作

創(chuàng)建原型或概念證明時(shí)，模擬 API 可以快速設(shè)定必要的後端交互，而無需建立實(shí)際的後端服務(wù)。

結(jié)論

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

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

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

以上是使用 Jest 掌握模擬 API 呼叫：綜合教學(xué)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！