DEV Community

APIKumo profile image Mean
Mean for APIKumo

Posted on

API Mocking: Build and Test Against Endpoints That Don't Exist Yet

#api #testing #tutorial #webdev

Stop Blocking on the Backend: API Mocking for Faster Frontend Development

Every team has lived this: the frontend is ready to build the checkout screen, but the /orders endpoint won't ship for another two weeks. So work stalls, or someone hard-codes a fake response that quietly rots until integration day — when nothing matches and everyone blames each other.

API mocking fixes this. A mock server returns realistic responses for endpoints that don't exist yet (or are flaky, slow, or rate-limited), so consumers can build and test against a stable contract. Here's how to do it well.

Start From the Contract, Not From Guesses

The worst mocks are invented by hand and drift from reality. The best ones are generated from the same OpenAPI spec the real API will implement. That way the mock is the contract.

A minimal spec for one endpoint:

# openapi.yaml
openapi: 3.0.3
info: { title: Orders API, version: 1.0.0 }
paths:
  /orders/{id}:
    get:
      parameters:
        - name: id
          in: path
          required: true
          schema: { type: string }
      responses:
        '200':
          description: An order
          content:
            application/json:
              schema:
                type: object
                properties:
                  id: { type: string, example: "ord_123" }
                  status: { type: string, example: "shipped" }
                  total_cents: { type: integer, example: 4999 }
Enter fullscreen mode Exit fullscreen mode

Tools like Prism turn that directly into a running server:

npx @stoplight/prism-cli mock openapi.yaml
# → Prism is listening on http://127.0.0.1:4010

curl http://127.0.0.1:4010/orders/ord_123
# {"id":"ord_123","status":"shipped","total_cents":4999}
Enter fullscreen mode Exit fullscreen mode

No backend, no database — but a response that's guaranteed to match the documented schema.

Roll Your Own When You Need Control

Sometimes you want custom logic: simulate latency, return different payloads per ID, or flip an endpoint into an error state on demand. A tiny Express server does the job:

// mock-server.js
const express = require("express");
const app = express();

const orders = {
  ord_123: { id: "ord_123", status: "shipped", total_cents: 4999 },
  ord_456: { id: "ord_456", status: "pending", total_cents: 1200 },
};

app.get("/orders/:id", (req, res) => {
  const order = orders[req.params.id];
  if (!order) {
    return res.status(404).json({
      type: "https://errors.example.com/not-found",
      title: "Order not found",
      status: 404,
    });
  }
  // Simulate a slow downstream so you can test loading states
  setTimeout(() => res.json(order), 300);
});

app.listen(4010, () => console.log("Mock on http://localhost:4010"));
Enter fullscreen mode Exit fullscreen mode

Now your frontend can exercise the 200 path, the 404 path, and the spinner — all before a single line of real backend code exists.

Mock at the Network Layer in Tests

For unit and integration tests, don't spin up a server at all — intercept requests in-process. Mock Service Worker (MSW) does this cleanly and runs in both Node and the browser:

import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";

const server = setupServer(
  http.get("https://api.example.com/orders/:id", ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      status: "shipped",
      total_cents: 4999,
    });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test("renders shipped order", async () => {
  const res = await fetch("https://api.example.com/orders/ord_123");
  const body = await res.json();
  expect(body.status).toBe("shipped");
});
Enter fullscreen mode Exit fullscreen mode

Because MSW intercepts at the network boundary, your application code uses the real fetch — no special test-only branches polluting production logic.

Keep Mocks Honest

A mock that drifts from the real API is worse than no mock at all, because it builds false confidence. Three habits keep them trustworthy:

  • Generate from the spec so the schema is always authoritative.
  • Validate the real API against the same spec in CI, so the contract stays a two-way promise.
  • Mock failure modes, not just happy paths — 429s, 500s, timeouts, and partial data are where real bugs hide.

Wrapping Up

API mocking decouples teams, shrinks feedback loops, and lets you test the ugly edge cases that are painful to reproduce against a live service. The key is to anchor your mocks to a single source of truth so they never quietly diverge from reality.

If you'd rather not stitch together separate tools for specs, mock servers, and request testing, APIKumo lets you design an API collection, generate a mock endpoint from it, and validate requests against the same definition — so your mock and your real API stay in sync as the contract evolves.

Top comments (0)