チュートリアル: Jestを使ったAPIコールのモックテスト
API呼び出しを行うコードのテストを書くときは、テストが信頼性が高く、迅速で、外部サービスに依存しないように、これらの呼び出しをモックすることが重要です。人気のJavaScriptテストフレームワークであるJestは、テスト内でAPI呼び出しを簡単にモックするためのいくつかの方法を提供しています。さまざまなアプローチを詳しく見ていきましょう。
Apidogは、APIライフサイクル全体にわたって開発者に高品質の機能を提供する包括的なローコードAPIプラットフォームです。自動コード生成、CI/CD統合、カスタマイズ可能なスクリプトなどの追加ツールを備え、一つのプラットフォーム内でプロフェッショナルなAPI開発を体験してください！
Apidogについてもっと知りたい方は、下のボタンをクリックしてください！
jest.mock()を使用する
JestでAPI呼び出しをモックする方法の一つは、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は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呼び出しのレスポンスをモックするためにaxios.get.mockResolvedValueOnce()を使用します。テストは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は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メソッドを独自の実装でモックすることができます2。
Axios-mock-adapterを使用する
このライブラリを使用すると、Axiosリクエストをより高度にモックできます。まず、インストールします：
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('ユーザーデータを返す', 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は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レスポンスのために再利用可能なモックフィクスチャを作成することを検討します
ApidogでAPIをモックする
異なるAPI開発体験を試してみたい場合は、Apidogの使用を検討してください！
Apidogは、API開発のためのシンプルで直感的なユーザーインターフェースを提供するローコードAPIプラットフォームです。Apidogを使用すれば、APIを構築、テスト、モック、ドキュメント化できます。Apidogを詳しく見てみましょう！
Apidogスマートモック
明確なモックルールがない場合、Apidogが手動設定なしにリアルなモックデータを自動生成します。
Apidogアドバンスドモック
クライアントとサーバー間のリアルなインタラクションをシミュレートするために、カスタムスクリプトを使用してAPIレスポンスを変更します。
Apidogクラウドモック
クラウドモック機能を使用して、固定アドレスを通じてチームとコラボレーションします。クラウドモックサーバーでアクセス可能です。
結論
モックは、特にAPI呼び出しのような外部依存関係を扱う際に、良いテストを書くための基本的なスキルです。Jestは、jest.mock()を使用してモジュール全体をモックしたり、モジュールを手動でモックしたり、axios-mock-adapterのようなライブラリを使用してより高度なケースでAPI呼び出しをモックするための多くの方法を提供しています。重要なのは、テストが独立しており、テストされるコードに焦点を当てるために、ニーズに合った正しいアプローチを選択することです。これらのモッキング手法をツールベルトに取り入れれば、APIに依存するコードのためのレジリエントなテストを書くことができます。