mocking-assistant

Mocking Assistant

Create reliable mocks for APIs and services in tests.

MSW API Mocking

// mocks/handlers.ts
import { http, HttpResponse } from "msw";

export const handlers = [
  // GET endpoint
  http.get("/api/users/:id", ({ params }) => {
    const { id } = params;

    return HttpResponse.json({
      id,
      name: "John Doe",
      email: "[email protected]",
    });
  }),

  // POST endpoint
  http.post("/api/users", async ({ request }) => {
    const body = await request.json();

    return HttpResponse.json(
      {
        id: Math.random().toString(),
        ...body,
        createdAt: new Date().toISOString(),
      },
      { status: 201 }
    );
  }),

  // Error response
  http.get("/api/products/:id", ({ params }) => {
    const { id } = params;

    if (id === "404") {
      return HttpResponse.json({ error: "Product not found" }, { status: 404 });
    }

    return HttpResponse.json({
      id,
      name: "MacBook Pro",
      price: 2499.99,
    });
  }),

  // Delayed response
  http.get("/api/slow-endpoint", async () => {
    await delay(2000);
    return HttpResponse.json({ data: "Slow response" });
  }),
];

MSW Setup

// mocks/server.ts
import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const server = setupServer(...handlers);

// tests/setup.ts
import { beforeAll, afterEach, afterAll } from "vitest";
import { server } from "../mocks/server";

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Fixture Conventions

// mocks/fixtures/users.ts
export const userFixtures = {
  admin: {
    id: "1",
    email: "[email protected]",
    name: "Admin User",
    role: "ADMIN",
  },
  customer: {
    id: "2",
    email: "[email protected]",
    name: "Customer User",
    role: "USER",
  },
  guest: {
    id: "3",
    email: "[email protected]",
    name: "Guest User",
    role: "GUEST",
  },
};

// mocks/fixtures/products.ts
export const productFixtures = {
  laptop: {
    id: "100",
    name: "MacBook Pro",
    price: 2499.99,
    stock: 10,
    category: "Electronics",
  },
  phone: {
    id: "101",
    name: "iPhone 15",
    price: 999.99,
    stock: 50,
    category: "Electronics",
  },
  outOfStock: {
    id: "102",
    name: "Sold Out Item",
    price: 499.99,
    stock: 0,
    category: "Electronics",
  },
};

// Usage in handlers
http.get("/api/users/:id", ({ params }) => {
  const user = Object.values(userFixtures).find((u) => u.id === params.id);

  if (!user) {
    return HttpResponse.json({ error: "User not found" }, { status: 404 });
  }

  return HttpResponse.json(user);
});