Streaming

You can respond to the intercepted request with a stream of data by constructing a ReadableStream instance and providing it as the body of a mocked response.

http.get('/stream', () => {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode('hello'))
      controller.enqueue(new TextEncoder().encode('world'))
      controller.close()
    },
  })
 
  return new HttpResponse(stream, {
    headers: {
      'content-type': 'text/plain',
    },
  })
})

Transform streams

You can use any kind of Web Stream supported by the Fetch API as a mocked response body, like a TransformStream, for example. Here’s a compound scenario of fetching the original response stream and injecting latency between its chunks using TransformStream:

import { http, HttpResponse, delay } from 'msw'
 
http.get('/video/:id', async ({ params }) => {
  const videoResponse = await fetch(
    `https://api.example.com/videos/${params.id}`,
  )
  const videoStream = videoResponse.body
 
  const latencyStream = new TransformStream({
    start() {},
    async transform(chunk, controller) {
      await delay(1000)
      controller.enqueue(chunk)
    },
  })
 
  return new HttpResponse(videoStream.pipeThrough(latencyStream), videoResponse)
})

Learn more about using response timing:

Response timing

Control server response time.