XMLHttpRequest progress events

As stated in the Limitations, the browser integration of MSW does not support the progress and upload progress events on XMLHttpRequest due to the Service Worker API design. You can circumvent that limitation by intercepting XMLHttpRequest earlier than the worker does, using the XMLHttpRequestInterceptor from the @mswjs/interceptors.

// mocks/xhr.ts
import { getResponse } from 'msw'
import { XMLHttpRequestInterceptor } from '@mswjs/interceptors'
import { handlers } from './handlers' // Import your request handlers
 
const interceptor = new XMLHttpRequestInterceptor()
 
interceptor.on('request', ({ request, controller }) => {
  const response = await getResponse(handlers, request)
 
  if (response) {
    controller.respondWith(response)
  }
})
 
interceptor.apply()

// mocks/browser.ts
import './xhr'
 
// The rest of your browser setup for MSW here.
// (e.g. `setupWorker`, `handlers`, etc.)

In the example above, you can resolve your existing handlers against the XMLHttpRequestInterceptor via the getResponse function. This way, your setup stays the same, you still write your request handlers as you are used to, but pass them through this manual interceptor. The XMLHttpRequestInterceptor patches the XMLHttpRequest class, which means that XMLHttpRequest will not be visible to the Service Worker anymore. The rest of your handlers are not affected by this.

XMLHttpRequest upload progress discussion on GitHub

Related resources