自動テストにおける API モック：ユニット／結合／E2E を高速化

モダンなアプリは API に大きく依存します。しかし自動テストで実 API に依存すると、遅延・不安定・想定外の失敗を招きがちです。

そこで役立つのが モック API。バックエンドなしでも、予測可能・高速・隔離されたレスポンスでテストを実行できます。

本記事では MockApiHub をテストワークフローに組み込む方法を、Jest（ユニット）、Cypress（結合／E2E）、**Playwright（ブラウザ E2E）**の順に解説します。

なぜテストでモック API を使うのか

✅ 安定性：ネットワーク障害やバックエンド停止によるフレークを排除
🚀 速度：モックは即応答、テスト時間を短縮
🧪 制御：エッジケースを自在に再現
🔁 再現性：同じ入力 → 毎回同じ出力（決定論的）

ユニットテスト（Jest）

ユニットでは関数のモックが基本ですが、コンポーネントが API フェッチするなら、モックエンドポイントを指すのが手軽です。

TSX

import { render, screen } from "@testing-library/react";
import Users from "../components/Users";

describe("UserList component", () => {
it("renders mock API data", async () => {
// Mock fetch to return data from MockApiHub
global.fetch = jest.fn(() =>
Promise.resolve({
json: () =>
Promise.resolve([
{ id: 1, name: "Alice", email: "alice@example.com" },
{ id: 2, name: "Bob", email: "bob@example.com" },
]),
})
) as jest.Mock;

  render(<Users />);

  expect(await screen.findByText("Alice")).toBeInTheDocument();
  expect(await screen.findByText("Bob")).toBeInTheDocument();

});
});

インラインでモックする代わりに、決定論的なレスポンスを返す https://mockapihub.com/api/users を使う方法もあります。

結合／E2E テスト（Cypress）

Cypress はネットワークリクエストのスタブが簡単です。モック API に直接向けることもできます。

// cypress/e2e/userlist.cy.js
describe("User List Page", () => {
it("shows users from a mock API", () => {
  cy.visit("/users");

  // Mock network response with Cypress intercept
  cy.intercept("GET", "/api/users", {
    fixture: "users.json",
  });

  cy.contains("Alice").should("exist");
  cy.contains("Bob").should("exist");

});
});

ライブなモックデータを使いたい場合：

cy.intercept("GET", "/api/users", { url: "https://mockapihub.com/api/users" });

ブラウザ E2E（Playwright）

Playwright でもリクエストをインターセプトできます。

// tests/userlist.spec.ts
import { test, expect } from "@playwright/test";

test("shows users from mock API", async ({ page }) => {
await page.route("**/api/users", async (route) => {
const mockResponse = [
{ id: 1, name: "Charlie", email: "charlie@example.com" },
{ id: 2, name: "Dana", email: "dana@example.com" },
];
await route.fulfill({ json: mockResponse });
});

await page.goto("http://localhost:3000/users");

await expect(page.locator("text=Charlie")).toBeVisible();
await expect(page.locator("text=Dana")).toBeVisible();
});

モック API テストのベストプラクティス

モックレスポンスはfixtures（JSON）に集約して再利用
ハッピーパスとエッジケースの両方を検証
まずは MockApiHub で迅速に整備 → 本番直前に実 API へ切替
どのテストがモック／実 APIかをドキュメント化

まとめ

モック API はプロトタイピングだけではありません。自動テストの生産性を大きく引き上げる武器です。
Jest／Cypress／Playwright のいずれでも、モックを使えばテストは高速・安定・再現可能になります。

👉 いますぐ MockApiHub Playground で試し、決定論的な API レスポンスをワークフローに組み込みましょう。