fix(rest): support ReadableStream as response body

src/mockServiceWorker.js

@@ -203,6 +203,10 @@ async function getResponse(event, client, requestId) {
       )
     }
 
+    case 'MOCK_STREAM_START': {
+      return respondWithStream(clientMessage)
+    }
+
     case 'MOCK_NOT_FOUND': {
       return getOriginalResponse()
     }
@@ -309,6 +313,22 @@ function sendToClient(client, message) {
         return reject(event.data.error)
       }
 
+      switch (event.data?.type) {
+        // message 'MOCK_STREAM_START' resolves the Promise, but then the client sends
+        // more messages from a ReadableStream (see issue #581)
+        case 'MOCK_STREAM_CHUNK': {
+          console.log('chunk')
+          globalThis.currentStreamController.enqueue(event.data?.payload?.chunk)
+          return
+        }
+
+        case 'MOCK_STREAM_END': {
+          console.log('end')
+          globalThis.currentStreamController.close()
+          return
+        }
+      }
+
       resolve(event.data)
     }
 
@@ -329,6 +349,23 @@ function respondWithMock(clientMessage) {
   })
 }
 
+function respondWithStream(clientMessage) {
+  const stream = new ReadableStream({
+    start(controller) {
+      globalThis.currentStreamController = controller
+    },
+  }).pipeThrough(
+    // from https://web.dev/fetch-upload-streaming/#streaming-request-bodies
+    // > Each chunk of a [response] body needs to be a Uint8Array
+    new TextEncoderStream(),
+  )
+
+  return new Response(stream, {
+    ...clientMessage.payload,
+    headers: clientMessage.payload.headers,
+  })
+}
+
 function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     const r = (Math.random() * 16) | 0

src/setupWorker/glossary.ts

@@ -78,6 +78,9 @@ export type ServiceWorkerOutgoingEventTypes =
  */
 export type ServiceWorkerFetchEventTypes =
   | 'MOCK_SUCCESS'
+  | 'MOCK_STREAM_START'
+  | 'MOCK_STREAM_CHUNK'
+  | 'MOCK_STREAM_END'
   | 'MOCK_NOT_FOUND'
   | 'NETWORK_ERROR'
   | 'INTERNAL_ERROR'

src/utils/worker/createRequestListener.ts

@@ -46,6 +46,35 @@ export const createRequestListener = (
             })
           },
           onMockedResponse(response) {
+            if (response.body instanceof ReadableStream) {
+              channel.send({
+                type: 'MOCK_STREAM_START',
+                payload: { ...response, body: '__mocked_stream__' },
+              })
+
+              const reader = response.body.getReader()
+              const sendChunk = () => {
+                reader.read().then(({ done, value }) => {
+                  if (done) {
+                    channel.send({
+                      type: 'MOCK_STREAM_END',
+                    })
+                  } else {
+                    channel.send({
+                      type: 'MOCK_STREAM_CHUNK',
+                      payload: {
+                        chunk: value,
+                      },
+                    })
+                    sendChunk()
+                  }
+                })
+              }
+              sendChunk()
+
+              return
+            }
+
             channel.send({
               type: 'MOCK_SUCCESS',
               payload: response,

test/rest-api/response/body/body-stream.mocks.ts

@@ -0,0 +1,24 @@
+import { setupWorker, rest } from 'msw'
+
+const stream = new ReadableStream({
+  start(controller) {
+    controller.enqueue('line1\n')
+
+    setTimeout(() => {
+      controller.enqueue('line2\n')
+      controller.close()
+    }, 0)
+  },
+})
+
+const worker = setupWorker(
+  rest.get('/sse', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.set('Content-Type', 'text/plain'),
+      ctx.body(stream),
+    )
+  }),
+)
+
+worker.start()

test/rest-api/response/body/body-stream.node.test.ts

@@ -0,0 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
+test('Node does not support ReadableStream yet', () => {
+  expect(typeof ReadableStream).toBe('undefined')
+})

test/rest-api/response/body/body-stream.test.ts

@@ -0,0 +1,17 @@
+import * as path from 'path'
+import { pageWith } from 'page-with'
+
+test('responds with a ReadableStream response body', async () => {
+  const { request } = await pageWith({
+    example: path.resolve(__dirname, 'body-stream.mocks.ts'),
+  })
+
+  const res = await request('/sse')
+  const status = res.status()
+  const headers = await res.allHeaders()
+  const text = await res.text()
+
+  expect(status).toBe(200)
+  expect(headers['content-type']).toBe('text/plain')
+  expect(text).toBe('line1\nline2\n')
+})