使用 Jest 模擬 API 調(diào)用對(duì)于編寫(xiě)高效、快速且可靠的測(cè)試至關(guān)重要。本教程將指導(dǎo)您了解使用 Jest 的廣泛庫(kù)和高級(jí)場(chǎng)景適配器來(lái)控制模擬響應(yīng)的基本技術(shù)。

在為進(jìn)行 API 調(diào)用的代碼編寫(xiě)測(cè)試時(shí)，模擬這些調(diào)用非常重要。此策略可確保您的測(cè)試可靠、快速且獨(dú)立于外部服務(wù)。 Jest 是一種流行的 JavaScript 測(cè)試框架，它提供了多種方法來(lái)輕松模擬 API 調(diào)用。讓我們探索一下您可以使用的各種方法。

使用 jest.mock()

在 Jest 中模擬 API 調(diào)用的一種直接方法是使用 jest.mock() 函數(shù)來(lái)模擬發(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è)例子中，我們使用 jest.mock('axios') 自動(dòng)模擬整個(gè) axios 模塊。然后，我們使用 axios.get.mockResolvedValueOnce() 來(lái)模擬下一個(gè) axios.get 調(diào)用的響應(yīng)。我們的測(cè)試驗(yàn)證 API 是否被正確調(diào)用并返回模擬數(shù)據(jù)。

使用手動(dòng)模擬

另一種方法是通過(guò)創(chuàng)建 __mocks__ 文件夾并在其中放入模擬實(shí)現(xiàn)文件來(lái)手動(dòng)模擬進(jìn)行 API 調(diào)用的模塊：

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

現(xiàn)在在您的測(cè)試中，您可以為每個(gè)測(cè)試模擬不同的響應(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);
});

通過(guò)這個(gè)手動(dòng)模擬，您可以完全控制并可以使用您自己的實(shí)現(xiàn)來(lái)模擬不同的 Axios 方法，例如 get 和 post。

使用 axios-mock-adapter

對(duì)于 Axios 請(qǐng)求的更高級(jí)模擬，您可以使用 axios-mock-adapter 庫(kù)。首先，安裝它：

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

然后在您的測(cè)試中：

// 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)頭等來(lái)模擬請(qǐng)求。您還可以模擬錯(cuò)誤和超時(shí)。

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

如果您的代碼直接使用 axios，另一種選擇是在測(cè)試期間將模擬的 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 調(diào)用的技巧

以下是在 Jest 中模擬 API 調(diào)用時(shí)要記住的一些提示：

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

使用 EchoAPI 模擬 API

EchoAPI是一款優(yōu)秀的API接口設(shè)計(jì)、調(diào)試和測(cè)試工具。它通過(guò)提供一個(gè)集成環(huán)境來(lái)簡(jiǎn)化開(kāi)發(fā)過(guò)程，開(kāi)發(fā)人員可以在其中高效地創(chuàng)建、測(cè)試和驗(yàn)證 API。 EchoAPI 的一項(xiàng)關(guān)鍵功能是支持模擬服務(wù)，允許開(kāi)發(fā)人員模擬 API 響應(yīng)以進(jìn)行有效測(cè)試。以下是如何在 EchoAPI 中設(shè)置模擬 API：

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

將 URL 定義為 /echoapi/login。

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

轉(zhuǎn)到設(shè)計(jì)部分并配置預(yù)期響應(yīng)。

要成功響應(yīng)，請(qǐng)按如下方式配置 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)按如下方式配置 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. 激活模擬模式

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

前端開(kāi)發(fā)

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

自動(dòng)化測(cè)試

模擬 API 為自動(dòng)化測(cè)試提供一致的響應(yīng)，使編寫(xiě)可靠的測(cè)試變得更加容易。 Jest 和 Cypress 等工具可以與模擬 API 集成來(lái)測(cè)試各種組件和流程。

原型制作

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

結(jié)論

模擬 API 調(diào)用是編寫(xiě)可靠且快速的測(cè)試的一項(xiàng)基本技能，尤其是在處理外部依賴項(xiàng)時(shí)。 Jest 提供了多種模擬 API 調(diào)用的方法，從使用 jest.mock() 模擬整個(gè)模塊、手動(dòng)模擬模塊，到使用 axios-mock-adapter 等庫(kù)來(lái)實(shí)現(xiàn)更高級(jí)的情況。關(guān)鍵是根據(jù)您的需求選擇正確的方法，同時(shí)保持測(cè)試獨(dú)立并專注于正在測(cè)試的代碼。

此外，EchoAPI 提供了強(qiáng)大的工具來(lái)模擬 API，從而增強(qiáng)您的開(kāi)發(fā)和測(cè)試工作流程。通過(guò)掌握這些技術(shù)，您可以編寫(xiě)彈性測(cè)試并保持高效、有效的 API 交互。

那為什么要等呢？立即開(kāi)始使用這些模擬技術(shù)和工具（例如 EchoAPI）來(lái)改進(jìn)您的開(kāi)發(fā)工作流程！

以上是使用 Jest 掌握模擬 API 調(diào)用：綜合教程的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！