Jest を使用してモック API 呼び出しをマスターする: 包括的なチュートリアル

Jest を使用して API 呼び出しをモックすることは、効率的、高速、信頼性の高いテストを作成するために非常に重要です。このチュートリアルでは、Jest の広範なライブラリと高度なシナリオ向けのアダプターを使用して、模擬応答を制御するための重要なテクニックを説明します。

API 呼び出しを行うコードのテストを作成するときは、それらの呼び出しをモックすることが重要です。この戦略により、テストの信頼性、高速性、および外部サービスからの独立性が保証されます。人気のある JavaScript テスト フレームワークである Jest は、API 呼び出しを簡単に模擬するためのメソッドをいくつか提供しています。使用できるさまざまなアプローチを見てみましょう。

jest.mock() の使用

Jest で API 呼び出しをモックする簡単な方法の 1 つは、 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 が正しく呼び出されたことを検証し、モックされたデータを返します。

手動モックの使用

もう 1 つのアプローチは、__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);
});

この手動モックを使用すると、完全に制御でき、独自の実装で get や post などのさまざまな Axios メソッドをモックできます。

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 の重要な機能の 1 つは、モック サービスのサポートであり、開発者が 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. モックのトリガー条件を設定する

「モック」セクションで、リクエスト本文のトリガー条件を設定します。 "email"="test@echoapi.com" および "password"="123456" の場合、予期される応答を Success として選択します。他のすべての条件については、期待される応答として失敗を選択します。

4. モックモードを有効にする

この API リクエストを送信する前に、モック サービスを有効にし、モック環境に切り替えます。

フロントエンド開発

フロントエンド開発でモック API を使用すると、バックエンドの準備が整うのを待たずに、すぐに機能に取り組むことができます。この並行開発アプローチにより、プロセス全体が高速化されます。

自動テスト

モック API は自動テストに対して一貫した応答を提供し、信頼性の高いテストを簡単に作成できるようにします。 Jest や Cypress などのツールは、モック API と統合して、さまざまなコンポーネントやフローをテストできます。

プロトタイピング

プロトタイプや概念実証を作成する場合、モック API を使用すると、実際のバックエンド サービスを構築することなく、必要なバックエンド インタラクションを迅速にセットアップできます。

結論

API 呼び出しのモックは、特に外部依存関係を扱う場合に、信頼性が高く高速なテストを作成するための基本的なスキルです。 Jest は、jest.mock() を使用したモジュール全体のモック、モジュールの手動モック、より高度なケースでの axios-mock-adapter のようなライブラリの使用まで、API 呼び出しをモックする複数の方法を提供します。重要なのは、テストを独立させてテスト対象のコードに集中させながら、ニーズに基づいて適切なアプローチを選択することです。

さらに、EchoAPI は API をモックするための強力なツールを提供し、開発およびテストのワークフローを強化します。これらのテクニックをマスターすることで、回復力のあるテストを作成し、効率的かつ効果的な API インタラクションを維持できます。

それでは、なぜ待つ必要があるのでしょうか?これらのモック技術や EchoAPI などのツールを今すぐ使用して、開発ワークフローを改善してください!

以上がJest を使用してモック API 呼び出しをマスターする: 包括的なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。