fix: match upgrade requests correctly in node.js

Author: kettanaito

src/core/ws.ts

@@ -1,5 +1,5 @@
 import { invariant } from 'outvariant'
-import { FetchResponse } from '@mswjs/interceptors'
+import { FetchResponse, resolveWebSocketUrl } from '@mswjs/interceptors'
 import type {
   WebSocketData,
   WebSocketClientConnectionProtocol,
@@ -115,7 +115,7 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
   const upgradeHandler = http.get(({ request }) => {
     return (
       request.headers.get('upgrade')?.toLowerCase() === 'websocket' &&
-      matchRequestUrl(new URL(request.url), url).matches
+      matchRequestUrl(new URL(resolveWebSocketUrl(request.url)), url).matches
     )
   }, ws.onUpgrade)
 
@@ -197,6 +197,8 @@ export const ws: WebSocketNamespace = {
     const digest = await crypto.subtle.digest('SHA-1', keyBytes)
     const acceptValue = btoa(String.fromCharCode(...new Uint8Array(digest)))
 
+    new WebSocket(resolveWebSocketUrl(request.url))
+
     return new FetchResponse(null, {
       status: 101,
       headers: {

test/browser/ws-api/ws.upgrade.browser.test.ts

@@ -0,0 +1,45 @@
+import type { ws } from 'msw'
+import type { setupWorker } from 'msw/browser'
+import { test, expect } from '../playwright.extend'
+
+declare global {
+  interface Window {
+    msw: {
+      ws: typeof ws
+      setupWorker: typeof setupWorker
+    }
+  }
+}
+
+test('', async ({ loadExample, page }) => {
+  await loadExample(new URL('./ws.runtime.js', import.meta.url), {
+    skipActivation: true,
+  })
+
+  await page.evaluate(async () => {
+    const { setupWorker, ws } = window.msw
+    const service = ws.link('wss://localhost/ws')
+
+    const worker = setupWorker(
+      service.addEventListener('connection', ({ client }) => {
+        console.log('CONNECTION CALLED!')
+        client.send('hello world')
+      }),
+    )
+    await worker.start()
+  })
+
+  await page.evaluate(async () => {
+    await fetch('https://localhost/ws', {
+      headers: {
+        upgrade: 'websocket',
+      },
+    })
+
+    // const socket = new WebSocket('wss://example.com')
+    // return new Promise<string>((resolve, reject) => {
+    //   socket.onmessage = (event) => resolve(event.data)
+    //   socket.onerror = () => reject(new Error('WebSocket error'))
+    // }).finally(() => socket.close())
+  })
+})

test/node/ws-api/ws.upgrade.test.ts

@@ -0,0 +1,51 @@
+// @vitest-environment node
+import { ws } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+it('intercepts a WebSocket connection via an HTTP request upgrade', async () => {
+  const api = ws.link('wss://localhost/ws')
+
+  const connectionListener = vi.fn()
+  server.use(api.addEventListener('connection', connectionListener))
+
+  const upgradeResponse = await fetch('https://localhost/ws', {
+    headers: {
+      upgrade: 'websocket',
+      connection: 'upgrade',
+      'sec-websocket-key': 'abc-123',
+    },
+  })
+
+  expect.soft(upgradeResponse.status).toBe(101)
+  expect.soft(upgradeResponse.headers.get('upgrade')).toBe('websocket')
+  expect.soft(upgradeResponse.headers.get('connection')).toBe('upgrade')
+  expect
+    .soft(upgradeResponse.headers.get('sec-websocket-accept'))
+    .toBe('apA7rfK383HiPlWh1+EOR3vC9ww=')
+
+  await expect
+    .poll(() => connectionListener)
+    .toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        client: expect.objectContaining({
+          socket: expect.objectContaining({
+            url: 'wss://localhost/ws',
+          }),
+        }),
+      }),
+    )
+})