@mandujs/mcp 0.36.2 → 0.37.0

package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md

@@ -1,219 +1,219 @@
----
-title: Mock Fetch Requests in Tests
-impact: MEDIUM
-impactDescription: Isolates tests from external dependencies
-tags: testing, mock, fetch, api
----
-
-## Mock Fetch Requests in Tests
-
-**Impact: MEDIUM (Isolates tests from external dependencies)**
-
-외부 API 호출을 모킹하여 테스트를 격리하고 빠르게 실행하세요.
-
-**기본 fetch 모킹:**
-
-```typescript
-// tests/helpers/mockFetch.ts
-import { mock, beforeEach, afterEach } from "bun:test";
-
-const originalFetch = global.fetch;
-
-export function mockFetch(responses: Record<string, unknown>) {
-  global.fetch = mock((url: string, options?: RequestInit) => {
-    const key = `${options?.method || "GET"} ${url}`;
-    const response = responses[key];
-
-    if (!response) {
-      return Promise.reject(new Error(`No mock for: ${key}`));
-    }
-
-    return Promise.resolve({
-      ok: true,
-      status: 200,
-      json: () => Promise.resolve(response),
-      text: () => Promise.resolve(JSON.stringify(response)),
-    } as Response);
-  });
-}
-
-export function restoreFetch() {
-  global.fetch = originalFetch;
-}
-```
-
-**사용 예시:**
-
-```typescript
-// app/users/client.test.tsx
-import { describe, it, expect, beforeEach, afterEach } from "bun:test";
-import { render, screen, waitFor } from "@testing-library/react";
-import { mockFetch, restoreFetch } from "@/tests/helpers/mockFetch";
-import { UserListIsland } from "./client";
-
-describe("UserListIsland", () => {
-  beforeEach(() => {
-    mockFetch({
-      "GET /api/users": {
-        users: [
-          { id: 1, name: "Alice" },
-          { id: 2, name: "Bob" },
-        ],
-      },
-      "POST /api/users": {
-        user: { id: 3, name: "Charlie" },
-      },
-    });
-  });
-
-  afterEach(() => {
-    restoreFetch();
-  });
-
-  it("should fetch and display users", async () => {
-    render(<UserListIsland />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Alice")).toBeDefined();
-      expect(screen.getByText("Bob")).toBeDefined();
-    });
-  });
-});
-```
-
-## 조건부 응답 모킹
-
-```typescript
-export function createMockFetch() {
-  const mocks: Array<{
-    match: (url: string, options?: RequestInit) => boolean;
-    response: () => Promise<Response>;
-  }> = [];
-
-  const mockFn = mock((url: string, options?: RequestInit) => {
-    for (const { match, response } of mocks) {
-      if (match(url, options)) {
-        return response();
-      }
-    }
-    return Promise.reject(new Error(`No mock for: ${url}`));
-  });
-
-  return {
-    mock: mockFn,
-    when: (pattern: string | RegExp) => ({
-      respond: (data: unknown, status = 200) => {
-        mocks.push({
-          match: (url) =>
-            typeof pattern === "string"
-              ? url.includes(pattern)
-              : pattern.test(url),
-          response: () =>
-            Promise.resolve({
-              ok: status >= 200 && status < 300,
-              status,
-              json: () => Promise.resolve(data),
-            } as Response),
-        });
-      },
-      reject: (error: Error) => {
-        mocks.push({
-          match: (url) =>
-            typeof pattern === "string"
-              ? url.includes(pattern)
-              : pattern.test(url),
-          response: () => Promise.reject(error),
-        });
-      },
-    }),
-    install: () => {
-      global.fetch = mockFn;
-    },
-    restore: () => {
-      global.fetch = originalFetch;
-    },
-  };
-}
-```
-
-**사용:**
-
-```typescript
-const fetchMock = createMockFetch();
-
-beforeEach(() => {
-  fetchMock.when("/api/users").respond({ users: [] });
-  fetchMock.when("/api/users/1").respond({ user: { id: 1, name: "Alice" } });
-  fetchMock.when("/api/error").respond({ message: "Error" }, 500);
-  fetchMock.install();
-});
-
-afterEach(() => {
-  fetchMock.restore();
-});
-```
-
-## 에러 응답 테스트
-
-```typescript
-it("should handle API error", async () => {
-  mockFetch({
-    "GET /api/users": { error: "Server error" },
-  });
-  // status 오버라이드
-  global.fetch = mock(() =>
-    Promise.resolve({
-      ok: false,
-      status: 500,
-      json: () => Promise.resolve({ error: "Server error" }),
-    } as Response)
-  );
-
-  render(<UserListIsland />);
-
-  await waitFor(() => {
-    expect(screen.getByText("Failed to load users")).toBeDefined();
-  });
-});
-```
-
-## 네트워크 에러 테스트
-
-```typescript
-it("should handle network error", async () => {
-  global.fetch = mock(() =>
-    Promise.reject(new Error("Network error"))
-  );
-
-  render(<UserListIsland />);
-
-  await waitFor(() => {
-    expect(screen.getByText("Network error")).toBeDefined();
-  });
-});
-```
-
-## fetch 호출 검증
-
-```typescript
-it("should call API with correct params", async () => {
-  const mockFn = mock(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve({ users: [] }),
-    } as Response)
-  );
-  global.fetch = mockFn;
-
-  render(<UserListIsland filter="active" />);
-
-  await waitFor(() => {
-    expect(mockFn).toHaveBeenCalledWith(
-      "/api/users?filter=active",
-      expect.objectContaining({
-        method: "GET",
-      })
-    );
-  });
-});
-```
+---
+title: Mock Fetch Requests in Tests
+impact: MEDIUM
+impactDescription: Isolates tests from external dependencies
+tags: testing, mock, fetch, api
+---
+
+## Mock Fetch Requests in Tests
+
+**Impact: MEDIUM (Isolates tests from external dependencies)**
+
+외부 API 호출을 모킹하여 테스트를 격리하고 빠르게 실행하세요.
+
+**기본 fetch 모킹:**
+
+```typescript
+// tests/helpers/mockFetch.ts
+import { mock, beforeEach, afterEach } from "bun:test";
+
+const originalFetch = global.fetch;
+
+export function mockFetch(responses: Record<string, unknown>) {
+  global.fetch = mock((url: string, options?: RequestInit) => {
+    const key = `${options?.method || "GET"} ${url}`;
+    const response = responses[key];
+
+    if (!response) {
+      return Promise.reject(new Error(`No mock for: ${key}`));
+    }
+
+    return Promise.resolve({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(response),
+      text: () => Promise.resolve(JSON.stringify(response)),
+    } as Response);
+  });
+}
+
+export function restoreFetch() {
+  global.fetch = originalFetch;
+}
+```
+
+**사용 예시:**
+
+```typescript
+// app/users/client.test.tsx
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import { mockFetch, restoreFetch } from "@/tests/helpers/mockFetch";
+import { UserListIsland } from "./client";
+
+describe("UserListIsland", () => {
+  beforeEach(() => {
+    mockFetch({
+      "GET /api/users": {
+        users: [
+          { id: 1, name: "Alice" },
+          { id: 2, name: "Bob" },
+        ],
+      },
+      "POST /api/users": {
+        user: { id: 3, name: "Charlie" },
+      },
+    });
+  });
+
+  afterEach(() => {
+    restoreFetch();
+  });
+
+  it("should fetch and display users", async () => {
+    render(<UserListIsland />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Alice")).toBeDefined();
+      expect(screen.getByText("Bob")).toBeDefined();
+    });
+  });
+});
+```
+
+## 조건부 응답 모킹
+
+```typescript
+export function createMockFetch() {
+  const mocks: Array<{
+    match: (url: string, options?: RequestInit) => boolean;
+    response: () => Promise<Response>;
+  }> = [];
+
+  const mockFn = mock((url: string, options?: RequestInit) => {
+    for (const { match, response } of mocks) {
+      if (match(url, options)) {
+        return response();
+      }
+    }
+    return Promise.reject(new Error(`No mock for: ${url}`));
+  });
+
+  return {
+    mock: mockFn,
+    when: (pattern: string | RegExp) => ({
+      respond: (data: unknown, status = 200) => {
+        mocks.push({
+          match: (url) =>
+            typeof pattern === "string"
+              ? url.includes(pattern)
+              : pattern.test(url),
+          response: () =>
+            Promise.resolve({
+              ok: status >= 200 && status < 300,
+              status,
+              json: () => Promise.resolve(data),
+            } as Response),
+        });
+      },
+      reject: (error: Error) => {
+        mocks.push({
+          match: (url) =>
+            typeof pattern === "string"
+              ? url.includes(pattern)
+              : pattern.test(url),
+          response: () => Promise.reject(error),
+        });
+      },
+    }),
+    install: () => {
+      global.fetch = mockFn;
+    },
+    restore: () => {
+      global.fetch = originalFetch;
+    },
+  };
+}
+```
+
+**사용:**
+
+```typescript
+const fetchMock = createMockFetch();
+
+beforeEach(() => {
+  fetchMock.when("/api/users").respond({ users: [] });
+  fetchMock.when("/api/users/1").respond({ user: { id: 1, name: "Alice" } });
+  fetchMock.when("/api/error").respond({ message: "Error" }, 500);
+  fetchMock.install();
+});
+
+afterEach(() => {
+  fetchMock.restore();
+});
+```
+
+## 에러 응답 테스트
+
+```typescript
+it("should handle API error", async () => {
+  mockFetch({
+    "GET /api/users": { error: "Server error" },
+  });
+  // status 오버라이드
+  global.fetch = mock(() =>
+    Promise.resolve({
+      ok: false,
+      status: 500,
+      json: () => Promise.resolve({ error: "Server error" }),
+    } as Response)
+  );
+
+  render(<UserListIsland />);
+
+  await waitFor(() => {
+    expect(screen.getByText("Failed to load users")).toBeDefined();
+  });
+});
+```
+
+## 네트워크 에러 테스트
+
+```typescript
+it("should handle network error", async () => {
+  global.fetch = mock(() =>
+    Promise.reject(new Error("Network error"))
+  );
+
+  render(<UserListIsland />);
+
+  await waitFor(() => {
+    expect(screen.getByText("Network error")).toBeDefined();
+  });
+});
+```
+
+## fetch 호출 검증
+
+```typescript
+it("should call API with correct params", async () => {
+  const mockFn = mock(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({ users: [] }),
+    } as Response)
+  );
+  global.fetch = mockFn;
+
+  render(<UserListIsland filter="active" />);
+
+  await waitFor(() => {
+    expect(mockFn).toHaveBeenCalledWith(
+      "/api/users?filter=active",
+      expect.objectContaining({
+        method: "GET",
+      })
+    );
+  });
+});
+```