Added custom fetch

packages/connect-msw/src/create-worker-handlers.ts

@@ -1,11 +1,7 @@
 import { MethodIdempotency } from "@bufbuild/protobuf";
-import type {
-  CallOptions,
-  ConnectRouter,
-  HandlerContext,
-} from "@connectrpc/connect";
+import type { ConnectRouter, HandlerContext } from "@connectrpc/connect";
 import type { UniversalHandler } from "@connectrpc/connect/protocol";
-import { http, HttpResponse, passthrough as mswPassthrough } from "msw";
+import { http, HttpResponse, passthrough as mswPassthrough, bypass } from "msw";
 import type { RequestHandler, ResponseResolver } from "msw";
 
 const passthroughHeader = "x-passthrough";
@@ -15,20 +11,13 @@ export function passthrough(ctx: HandlerContext) {
   return {};
 }
 
-export function createBypassOptions(callOptions: CallOptions): CallOptions {
-  return {
-    ...callOptions,
-    headers: {
-      // We could make this more consistent with the exposed bypass() function provided by msw
-      // IFF we could specify interceptors on a request by request basis. At least in theory, bypass()
-      // works on a standard Request object so we'd need a converter from the interceptor UnaryRequest/StreamRequest
-      // to a standard request to pass it to bypass() and out again.
-      // Otherwise, we just need to make sure this keeps in sync with https://github.com/mswjs/msw/blob/8855956f561ad4afd4ce7ae6500ca706757bb5a9/src/core/bypass.ts
-      "x-msw-intention": "bypass",
-      ...callOptions.headers,
-    },
-  };
-}
+/**
+ * Creates a custom fetch that will bypass MSW. This can be passed to
+ * as custom transport in order to to explicitly bypass MSW.
+ */
+export const bypassFetch: typeof globalThis.fetch = (input, init) => {
+  return fetch(bypass(input, init));
+};
 
 function createResponseResolver(handler: UniversalHandler): ResponseResolver {
   return async ({ request }) => {

packages/connect-msw/src/service.spec.ts

@@ -16,7 +16,7 @@ import type {
 } from "@connectrpc/connect-web";
 import { Code, ConnectError, createPromiseClient } from "@connectrpc/connect";
 import type { ServiceImpl } from "@connectrpc/connect";
-import { createBypassOptions, passthrough } from "./create-worker-handlers.js";
+import { bypassFetch, passthrough } from "./create-worker-handlers.js";
 
 type MockConnectTransportOptions = Omit<ConnectTransportOptions, "baseUrl">;
 type ConnectTestDef = {
@@ -86,6 +86,7 @@ function createElizaMock({
           ...transportOptions,
         })
   );
+
   server.listen({ onUnhandledRequest: "error" });
   return {
     dispose: () => {
@@ -217,16 +218,26 @@ it("handles bypassing the mock", async () => {
       },
     },
   });
+  const bypassClient = createPromiseClient(
+    ElizaService,
+    createConnectTransport({
+      baseUrl: "https://example.com/api",
+      fetch: bypassFetch,
+    })
+  );
   try {
     // Expect this to fail since the mock is bypassed. And will hit the real transport (and fail due to timeout)
     await expectAsync(
-      client.say(
+      bypassClient.say(
         { sentence: "Bypassing msw mock" },
-        createBypassOptions({
+        {
           timeoutMs: 10,
-        })
+        }
       )
     ).toBeRejectedWithError(ConnectError, /\[deadline_exceeded\]/);
+    // This call will succeed since it uses the mock.
+    const response = await client.say({ sentence: "Hello" });
+    expect(response.sentence).toBe("Faked response");
   } finally {
     dispose();
   }