fix(setupWorker): emit the correct life-cycle events for bypassed requests

src/browser/setupWorker/start/createRequestListener.ts

@@ -48,7 +48,7 @@ export const createRequestListener = (
  context.emitter,
  {
  onPassthroughResponse() {
- messageChannel.postMessage('NOT_FOUND')
+ messageChannel.postMessage('PASSTHROUGH')
  },
  async onMockedResponse(response, { handler, parsedResult }) {
  // Clone the mocked response so its body could be read

src/browser/setupWorker/start/createResponseListener.ts

@@ -21,6 +21,8 @@ export function createResponseListener(context: SetupWorkerInternalContext) {
  const request = context.requests.get(requestId)!
  context.requests.delete(requestId)
 
+ console.log('RESPONSE LISTENER', responseJson, context.requests)
+
  /**
  * CORS requests with `mode: "no-cors"` result in "opaque" responses.
  * That kind of responses cannot be manipulated in JavaScript due

src/browser/setupWorker/start/utils/createMessageChannel.ts

@@ -16,7 +16,7 @@ interface WorkerChannelEventsMap {
  data: StringifiedResponse,
  transfer?: [ReadableStream<Uint8Array>],
  ]
- NOT_FOUND: []
+ PASSTHROUGH: []
 }
 
 export class WorkerChannel {

src/core/utils/handleRequest.ts

@@ -52,7 +52,7 @@ export async function handleRequest(
 ): Promise<Response | undefined> {
  emitter.emit('request:start', { request, requestId })
 
- // Perform bypassed requests (i.e. issued via "ctx.fetch") as-is.
+ // Perform bypassed requests (i.e. wrapped in "bypass()") as-is.
  if (request.headers.get('x-msw-intention') === 'bypass') {
  emitter.emit('request:end', { request, requestId })
  handleRequestOptions?.onPassthroughResponse?.(request)

src/mockServiceWorker.js

@@ -206,13 +206,6 @@ async function getResponse(event, client, requestId) {
  return passthrough()
  }
 
- // Bypass requests with the explicit bypass header.
- // Such requests can be issued by "ctx.fetch()".
- const mswIntention = request.headers.get('x-msw-intention')
- if (['bypass', 'passthrough'].includes(mswIntention)) {
- return passthrough()
- }
-
  // Notify the client that a request has been intercepted.
  const requestBuffer = await request.arrayBuffer()
  const clientMessage = await sendToClient(
@@ -244,7 +237,7 @@ async function getResponse(event, client, requestId) {
  return respondWithMock(clientMessage.data)
  }
 
- case 'MOCK_NOT_FOUND': {
+ case 'PASSTHROUGH': {
  return passthrough()
  }
  }

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

@@ -1,4 +1,10 @@
-import { HttpResponse, http, LifeCycleEventsMap } from 'msw'
+import {
+ HttpResponse,
+ http,
+ LifeCycleEventsMap,
+ passthrough,
+ bypass,
+} from 'msw'
 import { setupWorker } from 'msw/browser'
 
 const worker = setupWorker(
@@ -8,6 +14,12 @@ const worker = setupWorker(
  http.post('*/no-response', () => {
  return
  }),
+ http.get('*/passthrough', () => {
+ return passthrough()
+ }),
+ http.get('*/bypass', async ({ request }) => {
+ return fetch(bypass(request, { method: 'POST' }))
+ }),
  http.get('*/unhandled-exception', () => {
  throw new Error('Unhandled resolver error')
  }),

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

@@ -1,4 +1,4 @@
-import type { SetupWorker } from 'msw/lib/browser'
+import type { SetupWorker } from 'msw/browser'
 import { HttpServer } from '@open-draft/test-server/http'
 import type { ConsoleMessages } from 'page-with'
 import { test, expect } from '../../../playwright.extend'
@@ -11,7 +11,20 @@ declare namespace window {
 
 const ON_EXAMPLE = require.resolve('./on.mocks.ts')
 
-let server: HttpServer
+const server = new HttpServer((app) => {
+ app.post('/no-response', (_req, res) => {
+ res.send('original-response')
+ })
+ app.get('/unknown-route', (_req, res) => {
+ res.send('majestic-unknown')
+ })
+ app.get('/passthrough', (_req, res) => {
+ res.send('passthrough-response')
+ })
+ app.post('/bypass', (_req, res) => {
+ res.send('bypassed-response')
+ })
+})
 
 export function getRequestId(messages: ConsoleMessages) {
  const requestStartMessage = messages.get('warning')?.find((message) => {
@@ -20,15 +33,12 @@ export function getRequestId(messages: ConsoleMessages) {
  return requestStartMessage?.split(' ')?.[3]
 }
 
-test.beforeEach(async ({ createServer }) => {
- server = await createServer((app) => {
- app.post('/no-response', (req, res) => {
- res.send('original-response')
- })
- app.get('/unknown-route', (req, res) => {
- res.send('majestic-unknown')
- })
- })
+test.beforeAll(async () => {
+ await server.listen()
+})
+
+test.afterAll(async () => {
+ await server.close()
 })
 
 test('emits events for a handled request and mocked response', async ({
@@ -111,6 +121,74 @@ test('emits events for an unhandled request', async ({
  ])
 })
 
+test('emits events for a passthrough request', async ({
+ loadExample,
+ spyOnConsole,
+ fetch,
+ waitFor,
+}) => {
+ const consoleSpy = spyOnConsole()
+ await loadExample(ON_EXAMPLE)
+
+ // Explicit "passthrough()" request must go through the
+ // same request processing pipeline to contain both
+ // "request" and "response" in the life-cycle event listener.
+ const url = server.http.url('/passthrough')
+ await fetch(url)
+ const requestId = getRequestId(consoleSpy)
+
+ await waitFor(() => {
+ expect(consoleSpy.get('warning')).toEqual([
+ `[request:start] GET ${url} ${requestId}`,
+ `[request:end] GET ${url} ${requestId}`,
+ `[response:bypass] ${url} passthrough-response GET ${url} ${requestId}`,
+ ])
+ })
+})
+
+test('emits events for a bypassed request', async ({
+ loadExample,
+ spyOnConsole,
+ fetch,
+ waitFor,
+ page,
+}) => {
+ const consoleSpy = spyOnConsole()
+ await loadExample(ON_EXAMPLE)
+
+ const pageErrors: Array<Error> = []
+ page.on('pageerror', (error) => pageErrors.push(error))
+
+ const url = server.http.url('/bypass')
+ await fetch(url)
+
+ await waitFor(() => {
+ // First, must print the events for the original (mocked) request.
+ expect(consoleSpy.get('warning')).toEqual(
+ expect.arrayContaining([
+ expect.stringContaining(`[request:start] GET ${url}`),
+ expect.stringContaining(`[request:end] GET ${url}`),
+ expect.stringContaining(
+ `[response:mocked] ${url} bypassed-response GET ${url}`,
+ ),
+ ]),
+ )
+
+ // Then, must also print events for the bypassed request.
+ expect(consoleSpy.get('warning')).toEqual(
+ expect.arrayContaining([
+ expect.stringContaining(`[request:start] POST ${url}`),
+ expect.stringContaining(`[request:end] POST ${url}`),
+ expect.stringContaining(
+ `[response:bypass] ${url} bypassed-response POST ${url}`,
+ ),
+ ]),
+ )
+
+ expect(pageErrors).toEqual([])
+ })
+})
+
 test('emits unhandled exceptions in the request handler', async ({
  loadExample,
  spyOnConsole,