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: "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 // 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: "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 // 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();

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();

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

Service Mocking // src/services/paymentService.ts export interface PaymentService { processPayment(amount: number, cardToken: string): Promise; refund(transactionId: string): Promise; }

// mocks/services/mockPaymentService.ts export class MockPaymentService implements PaymentService { async processPayment( amount: number, cardToken: string ): Promise { // 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 { // 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 // 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(

mocking-assistant

安装