chore: add integration test for the generated runtime

Author: astahmer

.github/workflows/build-and-test.yaml

@@ -23,5 +23,11 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Run integration test (MSW)
+        run: pnpm test:runtime
+
+      - name: Type check generated client and integration test
+        run: pnpm exec tsc --noEmit tmp/generated-client.ts tests/integration-runtime-msw.test.ts
+
       - name: Test
         run: pnpm test

.gitignore

@@ -25,3 +25,5 @@ styled-system
 styled-system-static
 .vercel
 *.tsbuildinfo
+
+tmp

package.json

@@ -14,7 +14,8 @@
     "test": "cd packages/typed-openapi && pnpm run test"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.4"
+    "@changesets/cli": "^2.29.4",
+    "msw": "2.10.5"
   },
   "packageManager": "pnpm@9.6.0+sha256.dae0f7e822c56b20979bb5965e3b73b8bdabb6b8b8ef121da6d857508599ca35"
 }

packages/typed-openapi/package.json

@@ -22,6 +22,9 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "test": "vitest",
+    "test:runtime": "pnpm run generate:runtime && pnpm run test:runtime:run",
+    "generate:runtime": "node bin.js ./tests/samples/petstore.yaml --output ./tmp/generated-client.ts",
+    "test:runtime:run": "vitest run tests/integration-runtime-msw.test.ts",
     "fmt": "prettier --write src",
     "typecheck": "tsc -b ./tsconfig.build.json"
   },
@@ -40,6 +43,7 @@
     "@changesets/cli": "^2.29.4",
     "@types/node": "^22.15.17",
     "@types/prettier": "3.0.0",
+    "msw": "2.10.5",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
     "vitest": "^3.1.3"

packages/typed-openapi/scripts.runtime.json

@@ -0,0 +1,8 @@
+{
+    "name": "Generate and test runtime client with MSW integration",
+    "scripts": {
+        "test:runtime": "pnpm run generate:runtime && pnpm run test:runtime:run",
+        "generate:runtime": "pnpm exec tsx src/generate-client-files.ts tests/samples/petstore.yaml --output tmp/generated-client.ts --runtime none --schemasOnly true",
+        "test:runtime:run": "vitest run tests/integration-runtime-msw.test.ts"
+    }
+}

packages/typed-openapi/tests/api-client.example.ts

@@ -0,0 +1,93 @@
+/**
+ * Generic API Client for typed-openapi generated code
+ *
+ * This is a simple, production-ready wrapper that you can copy and customize.
+ * It handles:
+ * - Path parameter replacement
+ * - Query parameter serialization
+ * - JSON request/response handling
+ * - Basic error handling
+ *
+ * Usage:
+ * 1. Replace './generated/api' with your actual generated file path
+ * 2. Set your API_BASE_URL
+ * 3. Customize error handling and headers as needed
+ */
+
+import { type Fetcher, createApiClient  } from "../tmp/generated-client.ts";
+
+// Basic configuration
+const API_BASE_URL = process.env["API_BASE_URL"] || "https://api.example.com";
+
+/**
+ * Simple fetcher implementation without external dependencies
+ */
+const fetcher: Fetcher = async (method, apiUrl, params) => {
+  const headers = new Headers();
+
+  // Replace path parameters (supports both {param} and :param formats)
+  const actualUrl = replacePathParams(apiUrl, (params?.path ?? {}) as Record<string, string>);
+  const url = new URL(actualUrl);
+
+  // Handle query parameters
+  if (params?.query) {
+    const searchParams = new URLSearchParams();
+    Object.entries(params.query).forEach(([key, value]) => {
+      if (value != null) {
+        // Skip null/undefined values
+        if (Array.isArray(value)) {
+          value.forEach((val) => val != null && searchParams.append(key, String(val)));
+        } else {
+          searchParams.append(key, String(value));
+        }
+      }
+    });
+    url.search = searchParams.toString();
+  }
+
+  // Handle request body for mutation methods
+  const body = ["post", "put", "patch", "delete"].includes(method.toLowerCase())
+    ? JSON.stringify(params?.body)
+    : undefined;
+
+  if (body) {
+    headers.set("Content-Type", "application/json");
+  }
+
+  // Add custom headers
+  if (params?.header) {
+    Object.entries(params.header).forEach(([key, value]) => {
+      if (value != null) {
+        headers.set(key, String(value));
+      }
+    });
+  }
+
+  const response = await fetch(url, {
+    method: method.toUpperCase(),
+    ...(body && { body }),
+    headers,
+  });
+
+  if (!response.ok) {
+    // You can customize error handling here
+    const error = new Error(`HTTP ${response.status}: ${response.statusText}`);
+    (error as any).response = response;
+    (error as any).status = response.status;
+    throw error;
+  }
+
+  return response;
+};
+
+/**
+ * Replace path parameters in URL
+ * Supports both OpenAPI format {param} and Express format :param
+ */
+function replacePathParams(url: string, params: Record<string, string>): string {
+  return url
+    .replace(/{(\w+)}/g, (_, key: string) => params[key] || `{${key}}`)
+    .replace(/:([a-zA-Z0-9_]+)/g, (_, key: string) => params[key] || `:${key}`);
+}
+
+export const api = createApiClient(fetcher, API_BASE_URL);

packages/typed-openapi/tests/integration-runtime-msw.test.ts

@@ -0,0 +1,128 @@
+// Integration test for generated query client using MSW
+// This test ensures the generated client (TS types only, no schema validation) has no runtime errors
+
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { api } from "./api-client.example.js";
+import { createApiClient } from "../tmp/generated-client.ts";
+
+// Mock handler for a real endpoint from petstore.yaml
+const mockPets = [
+  {
+    id: 1,
+    name: "Fluffy",
+    photoUrls: [],
+    status: "available",
+  },
+];
+const server = setupServer(
+  // GET with query
+  http.get("http://localhost/pet/findByStatus", () => {
+    return HttpResponse.json(mockPets);
+  }),
+  // GET with path
+  http.get("http://localhost/pet/42", () => {
+    return HttpResponse.json({ id: 42, name: "Spot", photoUrls: [], status: "sold" });
+  }),
+  // POST with body
+  http.post("http://localhost/pet", async ({ request }) => {
+    let body: any = await request.json();
+    if (body == null || typeof body !== "object") body = {};
+    return HttpResponse.json({ ...body, id: 99 });
+  }),
+  // POST with path and query (no body expected)
+  http.post("http://localhost/pet/42", ({ request }) => {
+    const url = new URL(request.url);
+    const name = url.searchParams.get("name");
+    const status = url.searchParams.get("status");
+    return HttpResponse.json({ name, status });
+  }),
+  // DELETE with header
+  http.delete("http://localhost/pet/42", ({ request }) => {
+    if (request.headers.get("api_key") === "secret") {
+      return HttpResponse.text("deleted");
+    }
+    return HttpResponse.text("forbidden", { status: 403 });
+  }),
+);
+
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+
+describe("minimalist test", () => {
+  it("should fetch /pet/findByStatus and receive mocked pets", async () => {
+    const fetcher = (method: string, url: string) => fetch(url, { method });
+    const mini = createApiClient(fetcher, "http://localhost");
+    const result = await mini.get("/pet/findByStatus", { query: {} });
+    expect(result).toEqual(mockPets);
+  });
+});
+
+describe("Generated Query Client (runtime)", () => {
+  beforeAll(() => {
+    api.baseUrl = "http://localhost";
+  });
+
+  it("should fetch /pet/findByStatus and receive mocked pets", async () => {
+    const result = await api.get("/pet/findByStatus", { query: {} });
+    expect(result).toEqual(mockPets);
+  });
+
+  it("should fetch /pet/:petId with path param", async () => {
+    const result = await api.get("/pet/{petId}", { path: { petId: 42 } });
+    expect(result).toEqual({ id: 42, name: "Spot", photoUrls: [], status: "sold" });
+  });
+
+  it("should post /pet with body param", async () => {
+    const newPet = { name: "Rex", photoUrls: ["img.jpg"] };
+    const result = await api.post("/pet", { body: newPet });
+    expect(result).toMatchObject(newPet);
+    expect(result.id).toBe(99);
+  });
+
+  it("should post /pet/:petId with path and query params", async () => {
+    const result = await api.post("/pet/{petId}", {
+      path: { petId: 42 },
+      query: { name: "Buddy", status: "pending" },
+    });
+    expect(result).toEqual({ name: "Buddy", status: "pending" });
+  });
+
+  it("should delete /pet/:petId with header param", async () => {
+    const result = await api.delete("/pet/{petId}", {
+      path: { petId: 42 },
+      header: { api_key: "secret" },
+    });
+    expect(result).toBe("deleted");
+  });
+
+  it("should use .request to get a Response object", async () => {
+    const res = await api.request("get", "/pet/findByStatus", { query: {} });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toEqual(mockPets);
+  });
+
+  it("should use .request to post and get a Response object", async () => {
+    const newPet = { name: "Tiger", photoUrls: [] };
+    const res = await api.request("post", "/pet", { body: newPet });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toMatchObject(newPet);
+    expect(data.id).toBe(99);
+  });
+
+  it("should throw and handle error for forbidden delete", async () => {
+    api.baseUrl = "http://localhost";
+    await expect(
+      api.delete("/pet/{petId}", {
+        path: { petId: 42 },
+        header: { api_key: "wrong" },
+      }),
+    ).rejects.toMatchObject({
+      message: expect.stringContaining("403"),
+      status: 403,
+    });
+  });
+});