fix: add "request" to response events (#1993)

src/browser/setupWorker/glossary.ts

@@ -103,6 +103,7 @@ export interface SetupWorkerInternalContext {
   worker: ServiceWorker | null
   registration: ServiceWorkerRegistration | null
   requestHandlers: Array<RequestHandler>
+  requests: Map<string, Request>
   emitter: Emitter<LifeCycleEventsMap>
   keepAliveInterval?: number
   workerChannel: {

src/browser/setupWorker/setupWorker.ts

@@ -60,6 +60,7 @@ export class SetupWorkerApi
       worker: null,
       registration: null,
       requestHandlers: this.currentHandlers,
+      requests: new Map(),
       emitter: this.emitter,
       workerChannel: {
         on: (eventType, callback) => {

src/browser/setupWorker/start/createRequestListener.ts

@@ -8,6 +8,7 @@ import {
   WorkerChannel,
 } from './utils/createMessageChannel'
 import { parseWorkerRequest } from '../../utils/parseWorkerRequest'
+import { RequestHandler } from '~/core/handlers/RequestHandler'
 import { handleRequest } from '~/core/utils/handleRequest'
 import { RequiredDeep } from '~/core/typeUtils'
 import { devUtils } from '~/core/utils/internal/devUtils'
@@ -30,6 +31,14 @@ export const createRequestListener = (
     const request = parseWorkerRequest(message.payload)
     const requestCloneForLogs = request.clone()
 
+    // Make this the first requets clone before the
+    // request resolution pipeline even starts.
+    // Store the clone in cache so the first matching
+    // request handler would skip the cloning phase.
+    const requestClone = request.clone()
+    RequestHandler.cache.set(request, requestClone)
+    context.requests.set(requestId, requestClone)
+
     try {
       await handleRequest(
         request,

src/browser/setupWorker/start/createResponseListener.ts

@@ -1,8 +1,8 @@
-import {
+import type {
   ServiceWorkerIncomingEventsMap,
   SetupWorkerInternalContext,
 } from '../glossary'
-import { ServiceWorkerMessage } from './utils/createMessageChannel'
+import type { ServiceWorkerMessage } from './utils/createMessageChannel'
 import { isResponseWithoutBody } from '@mswjs/interceptors'
 
 export function createResponseListener(context: SetupWorkerInternalContext) {
@@ -15,6 +15,12 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
   ) => {
     const { payload: responseJson } = message
 
+    // Get the Request instance reference stored in the
+    // request listener.
+    const { requestId } = responseJson
+    const request = context.requests.get(requestId)!
+    context.requests.delete(requestId)
+
     /**
      * CORS requests with `mode: "no-cors"` result in "opaque" responses.
      * That kind of responses cannot be manipulated in JavaScript due
@@ -46,11 +52,7 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
       responseJson.isMockedResponse ? 'response:mocked' : 'response:bypass',
       {
         response,
-        /**
-         * @todo @fixme In this context, we don't know anything about
-         * the request.
-         */
-        request: null as any,
+        request,
         requestId: responseJson.requestId,
       },
     )

test/browser/msw-api/setup-worker/life-cycle-events/on.mocks.ts

@@ -35,15 +35,25 @@ const requestEndListener: (
 
 worker.events.on('request:end', requestEndListener)
 
-worker.events.on('response:mocked', async ({ response, requestId }) => {
-  const body = await response.clone().text()
-  console.warn(`[response:mocked] ${body} ${requestId}`)
-})
+worker.events.on(
+  'response:mocked',
+  async ({ response, request, requestId }) => {
+    const body = await response.clone().text()
+    console.warn(
+      `[response:mocked] ${body} ${request.method} ${request.url} ${requestId}`,
+    )
+  },
+)
 
-worker.events.on('response:bypass', async ({ response, requestId }) => {
-  const body = await response.clone().text()
-  console.warn(`[response:bypass] ${body} ${requestId}`)
-})
+worker.events.on(
+  'response:bypass',
+  async ({ response, request, requestId }) => {
+    const body = await response.clone().text()
+    console.warn(
+      `[response:bypass] ${body} ${request.method} ${request.url} ${requestId}`,
+    )
+  },
+)
 
 worker.events.on('unhandledException', ({ error, request, requestId }) => {
   console.warn(

test/browser/msw-api/setup-worker/life-cycle-events/on.test.ts

@@ -54,7 +54,7 @@ test('emits events for a handled request and mocked response', async ({
     `[request:start] GET ${url} ${requestId}`,
     `[request:match] GET ${url} ${requestId}`,
     `[request:end] GET ${url} ${requestId}`,
-    `[response:mocked] response-body ${requestId}`,
+    `[response:mocked] response-body GET ${url} ${requestId}`,
   ])
 })
 
@@ -80,7 +80,7 @@ test('emits events for a handled request with no response', async ({
   expect(consoleSpy.get('warning')).toEqual([
     `[request:start] POST ${url} ${requestId}`,
     `[request:end] POST ${url} ${requestId}`,
-    `[response:bypass] original-response ${requestId}`,
+    `[response:bypass] original-response POST ${url} ${requestId}`,
   ])
 })
 
@@ -107,7 +107,7 @@ test('emits events for an unhandled request', async ({
     `[request:start] GET ${url} ${requestId}`,
     `[request:unhandled] GET ${url} ${requestId}`,
     `[request:end] GET ${url} ${requestId}`,
-    `[response:bypass] majestic-unknown ${requestId}`,
+    `[response:bypass] majestic-unknown GET ${url} ${requestId}`,
   ])
 })
 

test/node/msw-api/setup-server/life-cycle-events/on.node.test.ts

@@ -59,13 +59,23 @@ beforeAll(async () => {
     listener(`[request:end] ${request.method} ${request.url} ${requestId}`)
   })
 
-  server.events.on('response:mocked', async ({ response, requestId }) => {
-    listener(`[response:mocked] ${await response.text()} ${requestId}`)
-  })
+  server.events.on(
+    'response:mocked',
+    async ({ response, request, requestId }) => {
+      listener(
+        `[response:mocked] ${await response.text()} ${request.method} ${request.url} ${requestId}`,
+      )
+    },
+  )
 
-  server.events.on('response:bypass', async ({ response, requestId }) => {
-    listener(`[response:bypass] ${await response.text()} ${requestId}`)
-  })
+  server.events.on(
+    'response:bypass',
+    async ({ response, request, requestId }) => {
+      listener(
+        `[response:bypass] ${await response.text()} ${request.method} ${request.url} ${requestId}`,
+      )
+    },
+  )
 
   server.events.on('unhandledException', ({ error, request, requestId }) => {
     listener(
@@ -114,7 +124,7 @@ test('emits events for a handler request and mocked response', async () => {
   )
   expect(listener).toHaveBeenNthCalledWith(
     4,
-    `[response:mocked] response-body ${requestId}`,
+    `[response:mocked] response-body GET ${url} ${requestId}`,
   )
   expect(listener).toHaveBeenCalledTimes(4)
 })
@@ -140,7 +150,7 @@ test('emits events for a handled request with no response', async () => {
   )
   expect(listener).toHaveBeenNthCalledWith(
     3,
-    `[response:bypass] original-response ${requestId}`,
+    `[response:bypass] original-response POST ${url} ${requestId}`,
   )
   expect(listener).toHaveBeenCalledTimes(3)
 })
@@ -170,7 +180,7 @@ test('emits events for an unhandled request', async () => {
   )
   expect(listener).toHaveBeenNthCalledWith(
     4,
-    `[response:bypass] majestic-unknown ${requestId}`,
+    `[response:bypass] majestic-unknown GET ${url} ${requestId}`,
   )
 })