Agent skill

mocking-assistant

Creates stable mocks for APIs, services, and UI components using MSW (Mock Service Worker), fixture conventions, and example patterns. Use for "API mocking", "MSW", "test mocks", or "service mocking".

View SKILL.md on GitHub Repository
Stars 23
Forks 2

Install this agent skill to your Project

npx add-skill https://github.com/patricio0312rev/skills/tree/main/testing/mocking-assistant

SKILL.md

Mocking Assistant

Create reliable mocks for APIs and services in tests.

MSW API Mocking

typescript
// 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: "john@example.com",
    });
  }),

  // 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

typescript
// 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

typescript
// mocks/fixtures/users.ts
export const userFixtures = {
  admin: {
    id: "1",
    email: "admin@example.com",
    name: "Admin User",
    role: "ADMIN",
  },
  customer: {
    id: "2",
    email: "customer@example.com",
    name: "Customer User",
    role: "USER",
  },
  guest: {
    id: "3",
    email: "guest@example.com",
    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);
});

Test-Specific Mocks

typescript
// tests/components/UserProfile.test.tsx
import { server } from "../mocks/server";
import { http, HttpResponse } from "msw";

test("should display user profile", async () => {
  // Override handler for this test
  server.use(
    http.get("/api/users/123", () => {
      return HttpResponse.json({
        id: "123",
        name: "Test User",
        email: "test@example.com",
      });
    })
  );

  render(<UserProfile userId="123" />);

  await waitFor(() => {
    expect(screen.getByText("Test User")).toBeInTheDocument();
  });
});

test("should handle API error", async () => {
  // Mock error response
  server.use(
    http.get("/api/users/123", () => {
      return HttpResponse.json({ error: "Server error" }, { status: 500 });
    })
  );

  render(<UserProfile userId="123" />);

  await waitFor(() => {
    expect(screen.getByText("Failed to load user")).toBeInTheDocument();
  });
});

Service Mocking

typescript
// src/services/paymentService.ts
export interface PaymentService {
  processPayment(amount: number, cardToken: string): Promise<PaymentResult>;
  refund(transactionId: string): Promise<void>;
}

// mocks/services/mockPaymentService.ts
export class MockPaymentService implements PaymentService {
  async processPayment(
    amount: number,
    cardToken: string
  ): Promise<PaymentResult> {
    // Simulate successful payment
    if (cardToken.startsWith("tok_success")) {
      return {
        transactionId: "txn_" + Math.random().toString(36),
        status: "success",
        amount,
      };
    }

    // Simulate failed payment
    if (cardToken.startsWith("tok_fail")) {
      throw new Error("Payment failed");
    }

    // Simulate slow payment
    await new Promise((resolve) => setTimeout(resolve, 2000));
    return {
      transactionId: "txn_" + Math.random().toString(36),
      status: "success",
      amount,
    };
  }

  async refund(transactionId: string): Promise<void> {
    // Mock refund
    console.log(`Refunding transaction: ${transactionId}`);
  }
}

// tests/checkout.test.ts
const mockPaymentService = new MockPaymentService();

test("should process payment successfully", async () => {
  const result = await mockPaymentService.processPayment(
    100,
    "tok_success_123"
  );

  expect(result.status).toBe("success");
  expect(result.transactionId).toBeDefined();
});

Function Mocking with Vitest

typescript
// src/utils/analytics.ts
export const trackEvent = (event: string, data: any) => {
  // Send to analytics service
};

// tests/component.test.ts
import { vi } from "vitest";
import * as analytics from "@/utils/analytics";

test("should track button click", () => {
  // Mock function
  const trackEventSpy = vi.spyOn(analytics, "trackEvent");

  render(<Button onClick={handleClick} />);
  fireEvent.click(screen.getByRole("button"));

  expect(trackEventSpy).toHaveBeenCalledWith("button_click", {
    buttonId: "submit",
  });
});

Date/Time Mocking

typescript
// tests/date-sensitive.test.ts
import { vi } from "vitest";

test("should show correct greeting based on time", () => {
  // Mock date to morning
  vi.setSystemTime(new Date("2024-01-01 09:00:00"));

  render(<Greeting />);
  expect(screen.getByText("Good morning!")).toBeInTheDocument();

  // Mock date to evening
  vi.setSystemTime(new Date("2024-01-01 19:00:00"));

  render(<Greeting />);
  expect(screen.getByText("Good evening!")).toBeInTheDocument();

  // Restore real time
  vi.useRealTimers();
});

Module Mocking

typescript
// src/lib/database.ts
export const db = {
  user: {
    findById: (id: string) => {
      // Real database query
    },
  },
};

// tests/mocks/database.ts
export const mockDb = {
  user: {
    findById: vi.fn((id: string) => ({
      id,
      name: "Mock User",
      email: "mock@example.com",
    })),
  },
};

// tests/userService.test.ts
vi.mock("@/lib/database", () => ({
  db: mockDb,
}));

test("should fetch user from database", async () => {
  const user = await userService.getUser("123");

  expect(mockDb.user.findById).toHaveBeenCalledWith("123");
  expect(user.name).toBe("Mock User");
});

GraphQL Mocking

typescript
// mocks/graphql-handlers.ts
import { graphql, HttpResponse } from "msw";

export const graphqlHandlers = [
  graphql.query("GetUser", ({ variables }) => {
    return HttpResponse.json({
      data: {
        user: {
          id: variables.id,
          name: "John Doe",
          email: "john@example.com",
        },
      },
    });
  }),

  graphql.mutation("CreateUser", ({ variables }) => {
    return HttpResponse.json({
      data: {
        createUser: {
          id: Math.random().toString(),
          ...variables.input,
        },
      },
    });
  }),
];

Best Practices

  1. Use MSW for HTTP: More realistic than mocking fetch
  2. Centralize fixtures: Single source of truth
  3. Test-specific overrides: Override defaults per test
  4. Mock at boundaries: Services, APIs, not internals
  5. Realistic data: Fixtures should match production
  6. Error scenarios: Test failure cases
  7. Timing control: Mock delays for loading states

Output Checklist

  • MSW handlers created
  • Fixture conventions established
  • Common fixtures defined
  • Test-specific mock overrides
  • Service mocks implemented
  • Function spies used appropriately
  • Date/time mocking when needed
  • Error scenarios mocked
  • GraphQL mocks (if applicable)
  • Documentation for mock usage

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

patricio0312rev/skills

rate-limiting-abuse-protection

Implements rate limiting and abuse prevention with per-route policies, IP/user-based limits, sliding windows, safe error responses, and observability. Use when adding "rate limiting", "API protection", "abuse prevention", or "DDoS protection".

23 2
Explore
patricio0312rev/skills

rbac-permissions-builder

Implements role-based access control with permission matrix, route guards, policy functions, and UI permission hints. Provides middleware/guards, helper utilities, test suggestions, and permission checking patterns. Use when building "RBAC", "permissions", "access control", or "authorization".

23 2
Explore
patricio0312rev/skills

websocket-realtime-builder

Implements real-time features using WebSockets with Socket.io, rooms, authentication, and reconnection handling. Use when users request "real-time updates", "WebSocket", "Socket.io", "live chat", or "push notifications".

23 2
Explore
patricio0312rev/skills

webhook-receiver-hardener

Secures webhook receivers with signature verification, retry handling, deduplication, idempotency keys, and error responses. Provides verification code, dedupe storage strategy, runbook for incidents. Use when implementing "webhooks", "webhook security", "event receivers", or "third-party integrations".

23 2
Explore
patricio0312rev/skills

auth-module-builder

Implements secure authentication patterns including login/registration, session management, JWT tokens, password hashing, cookie settings, and CSRF protection. Provides auth routes, middleware, security configurations, and threat model documentation. Use when building "authentication", "login system", "JWT auth", or "session management".

23 2
Explore
patricio0312rev/skills

rest-to-graphql-migrator

Migrates REST APIs to GraphQL incrementally with schema stitching, REST datasources, and gradual endpoint migration. Use when users request "migrate to GraphQL", "REST to GraphQL", "GraphQL wrapper", or "API modernization".

23 2
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results