ホーム/ Jestを使ったモックAPIコールのマスター: 初心者向けチュートリアル

Jestを使ったモックAPIコールのマスター: 初心者向けチュートリアル

Jestを使用してAPIコールをモックすることは、効率的で迅速かつ信頼性の高いテストを書くために重要です。このチュートリアルでは、Jestの豊富なライブラリとアダプターを用いてモックされたレスポンスを制御するための基本的な技術を紹介します。

川原建

2024年11月14日 • 4 min read

APIコールを行うコードのテストを書く際には、これらのコールをモックすることが重要です。この戦略により、テストは信頼性が高く、迅速で、外部サービスに依存しないものになります。Jestは、人気のあるJavaScriptテスティングフレームワークで、APIコールを簡単にモックするためのいくつかの方法を提供しています。以下に、使用できるさまざまなアプローチを探ってみましょう。

`jest.mock()`を使用する方法

JestでAPIコールをモックする1つの簡単な方法は、APIリクエストを行うモジュール全体を「jest.mock()」関数でモックすることです。以下はその例です：

// 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が正しく呼び出され、モックされたデータを返すことを確認します。

自作のモックを使用する方法

別の方法として、APIコールを行うモジュールを手動でモックし、__mocks__フォルダーにモックの実装ファイルを作成する方法があります：

// __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コールをモックする際には、以下のポイントを心に留めておいてください：

テスト間でのモックリセット: テストが独立していることを保証するために、beforeEachやafterEachを使用してください。
必要な機能だけをモックする: 過剰にモックするのを避け、実際にコードが使用する機能やモジュールに集中しましょう。
エラーケースのテスト: エラーや予期しないレスポンスをモックして、コードがエラーをどのように処理するかをテストしましょう。
再利用可能なモックフィクスチャ: 共通のAPIレスポンスについては再利用可能なモックフィクスチャを作成します。

EchoAPIを使ったモックAPI

EchoAPIは、APIインターフェースの設計、デバッグ、テストに最適なツールです。統合された環境を提供し、開発者が効率よくAPIを作成、テスト、検証できるようにします。EchoAPIの主な特徴は、モックサービスのサポートであり、APIレスポンスをシミュレートして効果的なテストを行うことが可能です。ここでは、EchoAPIでモックAPIを設定する方法を紹介します：

1. 新しいHTTPリクエストの作成

URLを/echoapi/loginとして定義します。

2. 期待されるレスポンスを設定

designセクションに移動し、期待されるレスポンスを設定します。

成功レスポンスの場合、JSONを以下のように設定します：

{
  "errcode": 0,
  "errstr": "success",
  "data": {
    "userId": "9252A47b-0E3B-98d5-DfAC-526b87A5f14f",
    "email": "test@echoapi.com",
    "nickName": "Alex"
  }
}

失敗レスポンスの場合、JSONを以下のように設定します：

{
  "errcode": 11001,
  "errstr": "User account not found",
  "data": []
}

3. モックトリガー条件の設定

Mockセクションで、リクエストボディに対するトリガー条件を設定します。もし"email"="test@echoapi.com"と"password"="123456"の場合、期待されるレスポンスとしてSuccessを選択します。それ以外の条件では、Failureを期待されるレスポンスとして選択します。

Configure the Mock Triggering Conditions.jpg

4. モックモードを有効化

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

フロントエンド開発

モックAPIを使用することで、バックエンドの準備を待たずに機能の開発を進めることができます。この並行開発のアプローチにより、全体のプロセスがスピードアップします。

自動テスト

モックAPIは一貫したレスポンスを提供し、信頼性の高いテストを作成しやすくします。JestやCypressのようなツールは、モックAPIと統合して様々なコンポーネントやフローをテストすることができます。

プロトタイピング

プロトタイプや概念実証を作成する際に、モックAPIを使用することで、実際のバックエンドサービスを構築せずに必要なバックエンドのやり取りを素早くセットアップできます。

結論

APIコールをモックすることは、特に外部依存を扱う場合、信頼性があり、迅速なテストを書くための基本スキルです。Jestは、jest.mock()でモジュール全体をモックする方法から、手動でモジュールをモックする方法、axios-mock-adapterのようなライブラリを使用した高度なケースまで、様々な方法でAPIコールをモックする手段を提供します。重要なのは、ニーズに合った方法を選んで、テストを独立させ、テスト対象のコードに集中することです。

さらに、EchoAPIはAPIのモックに強力なツールを提供し、開発とテストのワークフローを強化します。これらの技術をマスターすることで、堅牢なテストを書き、大切なAPIとの効率的で効果的なインタラクションを維持できるようになります。

さあ、待っている理由はありません！これらのモック技術とEchoAPIのようなツールを使って、あなたの開発ワークフローを今日から改善しましょう！

無料で始める

ホットトピックス

Postman vs Thunder Client Postmanの代替品 Insomniaの代替品 Brunoで自動テストを行う Thunder Clientの代替品須のVSCode拡張機能

jest.mock()を使用する方法