fix: add unhandled websocket connection handling

Author: kettanaito

src/core/new/frames/websocket-frame.ts

@@ -30,7 +30,7 @@ export abstract class WebSocketNetworkFrame extends BaseNetworkFrame<
 
   public async getUnhandledFrameMessage(): Promise<string> {
     const { connection } = this.data
-    const details = `\n\n \u2022 ${connection.client.url}\n\n`
+    const details = `\n\n  \u2022 ${connection.client.url}\n\n`
 
     return `intercepted a WebSocket connection without a matching event handler:${details}If you still wish to intercept this unhandled connection, please create an event handler for it.\nRead more: https://mswjs.io/docs/websocket`
   }

src/core/new/on-unhandled-frame.ts

@@ -77,18 +77,24 @@ export function fromLegacyOnUnhandledRequest(
   getLegacyValue: () => UnhandledRequestStrategy | undefined,
 ): UnhandledFrameCallback {
   return ({ frame, defaults }) => {
-    if (frame.protocol !== 'http') {
-      return
-    }
-
     const legacyOnUnhandledRequestStrategy = getLegacyValue()
 
     if (legacyOnUnhandledRequestStrategy === undefined) {
       return
     }
 
     if (typeof legacyOnUnhandledRequestStrategy === 'function') {
-      return legacyOnUnhandledRequestStrategy(frame.data.request, {
+      const request =
+        frame.protocol === 'http'
+          ? frame.data.request
+          : new Request(frame.data.connection.client.url, {
+              headers: {
+                connection: 'upgrade',
+                upgrade: 'websocket',
+              },
+            })
+
+      return legacyOnUnhandledRequestStrategy(request, {
         warning: defaults.warn,
         error: defaults.error,
       })

src/node/setup-server.ts

@@ -68,6 +68,12 @@ export class SetupServerApi implements SetupServer {
      * @fixme This expects a readonly emitter (subset of methods).
      */
     this.events = this.#network.events as any
+
+    /**
+     * @fixme Remove this method drilling in the future.
+     * Drop the `SetupServerApi` class altogether and implement `setupServer`
+     * as a simple function that can reference the network methods directly.
+     */
     this.use = this.#network.use.bind(this.#network)
     this.resetHandlers = this.#network.resetHandlers.bind(this.#network)
     this.restoreHandlers = this.#network.restoreHandlers.bind(this.#network)

test/node/ws-api/on-unhandled-request/warn.test.ts

@@ -34,12 +34,12 @@ it(
 
     expect(console.warn).toHaveBeenCalledWith(
       `\
-[MSW] Warning: intercepted a request without a matching request handler:
+[MSW] Warning: intercepted a WebSocket connection without a matching event handler:
 
-  • GET wss://localhost:4321/
+  • wss://localhost:4321/
 
-If you still wish to intercept this unhandled request, please create a request handler for it.
-Read more: https://mswjs.io/docs/http/intercepting-requests`,
+If you still wish to intercept this unhandled connection, please create an event handler for it.
+Read more: https://mswjs.io/docs/websocket`,
     )
   }),
 )