@mswjs/interceptors 0.22.3 → 0.22.4

package/lib/browser/interceptors/XMLHttpRequest/index.js

@@ -121,12 +121,28 @@ function optionsToProxyHandler(options) {
       return constructorCall.call(newTarget, args, next);
     };
   }
-  if (typeof setProperty !== "undefined") {
-    handler.set = function(target, propertyName, nextValue, receiver) {
-      const next = () => Reflect.set(target, propertyName, nextValue, receiver);
-      return setProperty.call(target, [propertyName, nextValue], next);
+  handler.set = function(target, propertyName, nextValue, receiver) {
+    const next = () => {
+      const ownDescriptors = Reflect.getOwnPropertyDescriptor(
+        target,
+        propertyName
+      );
+      if (typeof (ownDescriptors == null ? void 0 : ownDescriptors.set) !== "undefined") {
+        ownDescriptors.set.apply(target, [nextValue]);
+        return true;
+      }
+      return Reflect.defineProperty(target, propertyName, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: nextValue
+      });
     };
-  }
+    if (typeof setProperty !== "undefined") {
+      return setProperty.call(target, [propertyName, nextValue], next);
+    }
+    return next();
+  };
   handler.get = function(target, propertyName, receiver) {
     const next = () => target[propertyName];
     const value = typeof getProperty !== "undefined" ? getProperty.call(target, [propertyName, receiver], next) : next();
@@ -191,11 +207,25 @@ var XMLHttpRequestController = class {
     this.responseBuffer = new Uint8Array();
     this.request = createProxy(initialRequest, {
       setProperty: ([propertyName, nextValue], invoke) => {
-        if (propertyName === "withCredentials") {
-          define(this.request, "withCredentials", nextValue);
-          return true;
+        switch (propertyName) {
+          case "onabort":
+          case "onerror":
+          case "onload":
+          case "onloadend":
+          case "onloadstart":
+          case "onprogress":
+          case "ontimeout":
+          case "onreadystatechange": {
+            const eventName = propertyName.slice(
+              2
+            );
+            this.request.addEventListener(eventName, nextValue);
+            return invoke();
+          }
+          default: {
+            return invoke();
+          }
         }
-        return invoke();
       },
       methodCall: ([methodName, args], invoke) => {
         var _a;
@@ -259,21 +289,6 @@ var XMLHttpRequestController = class {
             });
             break;
           }
-          case "onabort":
-          case "onerror":
-          case "onload":
-          case "onloadend":
-          case "onloadstart":
-          case "onprogress":
-          case "ontimeout":
-          case "onreadystatechange": {
-            const [listener] = args;
-            this.registerEvent(
-              methodName,
-              listener
-            );
-            return invoke();
-          }
           default: {
             return invoke();
           }
@@ -326,14 +341,17 @@ var XMLHttpRequestController = class {
     Object.defineProperties(this.request, {
       response: {
         enumerable: true,
+        configurable: false,
         get: () => this.response
       },
       responseText: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseText
       },
       responseXML: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseXML
       }
     });
@@ -547,9 +565,19 @@ function createXMLHttpRequestProxy({
   log
 }) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
-    construct(target, args) {
+    construct(target, args, newTarget) {
       log("constructed new XMLHttpRequest");
-      const originalRequest = Reflect.construct(target, args);
+      const originalRequest = Reflect.construct(target, args, newTarget);
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      );
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        );
+      }
       const requestController = new XMLHttpRequestController(
         originalRequest,
         log

package/lib/browser/interceptors/XMLHttpRequest/index.mjs

@@ -121,12 +121,28 @@ function optionsToProxyHandler(options) {
       return constructorCall.call(newTarget, args, next);
     };
   }
-  if (typeof setProperty !== "undefined") {
-    handler.set = function(target, propertyName, nextValue, receiver) {
-      const next = () => Reflect.set(target, propertyName, nextValue, receiver);
-      return setProperty.call(target, [propertyName, nextValue], next);
+  handler.set = function(target, propertyName, nextValue, receiver) {
+    const next = () => {
+      const ownDescriptors = Reflect.getOwnPropertyDescriptor(
+        target,
+        propertyName
+      );
+      if (typeof (ownDescriptors == null ? void 0 : ownDescriptors.set) !== "undefined") {
+        ownDescriptors.set.apply(target, [nextValue]);
+        return true;
+      }
+      return Reflect.defineProperty(target, propertyName, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: nextValue
+      });
     };
-  }
+    if (typeof setProperty !== "undefined") {
+      return setProperty.call(target, [propertyName, nextValue], next);
+    }
+    return next();
+  };
   handler.get = function(target, propertyName, receiver) {
     const next = () => target[propertyName];
     const value = typeof getProperty !== "undefined" ? getProperty.call(target, [propertyName, receiver], next) : next();
@@ -191,11 +207,25 @@ var XMLHttpRequestController = class {
     this.responseBuffer = new Uint8Array();
     this.request = createProxy(initialRequest, {
       setProperty: ([propertyName, nextValue], invoke) => {
-        if (propertyName === "withCredentials") {
-          define(this.request, "withCredentials", nextValue);
-          return true;
+        switch (propertyName) {
+          case "onabort":
+          case "onerror":
+          case "onload":
+          case "onloadend":
+          case "onloadstart":
+          case "onprogress":
+          case "ontimeout":
+          case "onreadystatechange": {
+            const eventName = propertyName.slice(
+              2
+            );
+            this.request.addEventListener(eventName, nextValue);
+            return invoke();
+          }
+          default: {
+            return invoke();
+          }
         }
-        return invoke();
       },
       methodCall: ([methodName, args], invoke) => {
         var _a;
@@ -259,21 +289,6 @@ var XMLHttpRequestController = class {
             });
             break;
           }
-          case "onabort":
-          case "onerror":
-          case "onload":
-          case "onloadend":
-          case "onloadstart":
-          case "onprogress":
-          case "ontimeout":
-          case "onreadystatechange": {
-            const [listener] = args;
-            this.registerEvent(
-              methodName,
-              listener
-            );
-            return invoke();
-          }
           default: {
             return invoke();
           }
@@ -326,14 +341,17 @@ var XMLHttpRequestController = class {
     Object.defineProperties(this.request, {
       response: {
         enumerable: true,
+        configurable: false,
         get: () => this.response
       },
       responseText: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseText
       },
       responseXML: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseXML
       }
     });
@@ -547,9 +565,19 @@ function createXMLHttpRequestProxy({
   log
 }) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
-    construct(target, args) {
+    construct(target, args, newTarget) {
       log("constructed new XMLHttpRequest");
-      const originalRequest = Reflect.construct(target, args);
+      const originalRequest = Reflect.construct(target, args, newTarget);
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      );
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        );
+      }
       const requestController = new XMLHttpRequestController(
         originalRequest,
         log

package/lib/browser/interceptors/fetch/index.js

@@ -9,6 +9,7 @@ var _chunkQWL3EOEYjs = require('../../chunk-QWL3EOEY.js');
 
 // src/interceptors/fetch/index.ts
 var _outvariant = require('outvariant');
+var _until = require('@open-draft/until');
 var _FetchInterceptor = class extends _chunkQWL3EOEYjs.Interceptor {
   constructor() {
     super(_FetchInterceptor.symbol);
@@ -33,15 +34,25 @@ var _FetchInterceptor = class extends _chunkQWL3EOEYjs.Interceptor {
       );
       this.emitter.emit("request", interactiveRequest, requestId);
       this.log("awaiting for the mocked response...");
-      await this.emitter.untilIdle(
-        "request",
-        ({ args: [, pendingRequestId] }) => {
-          return pendingRequestId === requestId;
-        }
-      );
-      this.log("all request listeners have been resolved!");
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked();
-      this.log("event.respondWith called with:", mockedResponse);
+      const [middlewareException, mockedResponse] = await _until.until.call(void 0, async () => {
+        await this.emitter.untilIdle(
+          "request",
+          ({ args: [, pendingRequestId] }) => {
+            return pendingRequestId === requestId;
+          }
+        );
+        this.log("all request listeners have been resolved!");
+        const [mockedResponse2] = await interactiveRequest.respondWith.invoked();
+        this.log("event.respondWith called with:", mockedResponse2);
+        return mockedResponse2;
+      });
+      if (middlewareException) {
+        console.error(`${request.method} ${request.url} net::ERR_FAILED`);
+        const error = Object.assign(new TypeError("Failed to fetch"), {
+          cause: middlewareException
+        });
+        return Promise.reject(error);
+      }
       if (mockedResponse) {
         this.log("received mocked response:", mockedResponse);
         const responseCloine = mockedResponse.clone();

package/lib/browser/interceptors/fetch/index.mjs

@@ -9,6 +9,7 @@ import {
 
 // src/interceptors/fetch/index.ts
 import { invariant } from "outvariant";
+import { until } from "@open-draft/until";
 var _FetchInterceptor = class extends Interceptor {
   constructor() {
     super(_FetchInterceptor.symbol);
@@ -33,15 +34,25 @@ var _FetchInterceptor = class extends Interceptor {
       );
       this.emitter.emit("request", interactiveRequest, requestId);
       this.log("awaiting for the mocked response...");
-      await this.emitter.untilIdle(
-        "request",
-        ({ args: [, pendingRequestId] }) => {
-          return pendingRequestId === requestId;
-        }
-      );
-      this.log("all request listeners have been resolved!");
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked();
-      this.log("event.respondWith called with:", mockedResponse);
+      const [middlewareException, mockedResponse] = await until(async () => {
+        await this.emitter.untilIdle(
+          "request",
+          ({ args: [, pendingRequestId] }) => {
+            return pendingRequestId === requestId;
+          }
+        );
+        this.log("all request listeners have been resolved!");
+        const [mockedResponse2] = await interactiveRequest.respondWith.invoked();
+        this.log("event.respondWith called with:", mockedResponse2);
+        return mockedResponse2;
+      });
+      if (middlewareException) {
+        console.error(`${request.method} ${request.url} net::ERR_FAILED`);
+        const error = Object.assign(new TypeError("Failed to fetch"), {
+          cause: middlewareException
+        });
+        return Promise.reject(error);
+      }
       if (mockedResponse) {
         this.log("received mocked response:", mockedResponse);
         const responseCloine = mockedResponse.clone();

package/lib/node/RemoteHttpInterceptor.js

@@ -6,7 +6,7 @@ var _chunkQ56TMOP5js = require('./chunk-Q56TMOP5.js');
 var _chunkXLZJAPVSjs = require('./chunk-XLZJAPVS.js');
 
 
-var _chunkGGD5JOGBjs = require('./chunk-GGD5JOGB.js');
+var _chunkRVLLS44Wjs = require('./chunk-RVLLS44W.js');
 require('./chunk-SNNL2EXF.js');
 require('./chunk-VQ4DZOBB.js');
 
@@ -24,7 +24,7 @@ var RemoteHttpInterceptor = class extends _chunkQ56TMOP5js.BatchInterceptor {
       name: "remote-interceptor",
       interceptors: [
         new (0, _chunkXLZJAPVSjs.ClientRequestInterceptor)(),
-        new (0, _chunkGGD5JOGBjs.XMLHttpRequestInterceptor)()
+        new (0, _chunkRVLLS44Wjs.XMLHttpRequestInterceptor)()
       ]
     });
   }

package/lib/node/RemoteHttpInterceptor.mjs

@@ -6,7 +6,7 @@ import {
 } from "./chunk-FGPCRIW6.mjs";
 import {
   XMLHttpRequestInterceptor
-} from "./chunk-CYWTKHFI.mjs";
+} from "./chunk-P7NKDCFD.mjs";
 import "./chunk-G6ZTHYZQ.mjs";
 import "./chunk-GFH37L5D.mjs";
 import {

package/lib/node/{chunk-CYWTKHFI.mjs → chunk-P7NKDCFD.mjs}

@@ -123,12 +123,28 @@ function optionsToProxyHandler(options) {
       return constructorCall.call(newTarget, args, next);
     };
   }
-  if (typeof setProperty !== "undefined") {
-    handler.set = function(target, propertyName, nextValue, receiver) {
-      const next = () => Reflect.set(target, propertyName, nextValue, receiver);
-      return setProperty.call(target, [propertyName, nextValue], next);
+  handler.set = function(target, propertyName, nextValue, receiver) {
+    const next = () => {
+      const ownDescriptors = Reflect.getOwnPropertyDescriptor(
+        target,
+        propertyName
+      );
+      if (typeof (ownDescriptors == null ? void 0 : ownDescriptors.set) !== "undefined") {
+        ownDescriptors.set.apply(target, [nextValue]);
+        return true;
+      }
+      return Reflect.defineProperty(target, propertyName, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: nextValue
+      });
     };
-  }
+    if (typeof setProperty !== "undefined") {
+      return setProperty.call(target, [propertyName, nextValue], next);
+    }
+    return next();
+  };
   handler.get = function(target, propertyName, receiver) {
     const next = () => target[propertyName];
     const value = typeof getProperty !== "undefined" ? getProperty.call(target, [propertyName, receiver], next) : next();
@@ -193,11 +209,25 @@ var XMLHttpRequestController = class {
     this.responseBuffer = new Uint8Array();
     this.request = createProxy(initialRequest, {
       setProperty: ([propertyName, nextValue], invoke) => {
-        if (propertyName === "withCredentials") {
-          define(this.request, "withCredentials", nextValue);
-          return true;
+        switch (propertyName) {
+          case "onabort":
+          case "onerror":
+          case "onload":
+          case "onloadend":
+          case "onloadstart":
+          case "onprogress":
+          case "ontimeout":
+          case "onreadystatechange": {
+            const eventName = propertyName.slice(
+              2
+            );
+            this.request.addEventListener(eventName, nextValue);
+            return invoke();
+          }
+          default: {
+            return invoke();
+          }
         }
-        return invoke();
       },
       methodCall: ([methodName, args], invoke) => {
         var _a;
@@ -261,21 +291,6 @@ var XMLHttpRequestController = class {
             });
             break;
           }
-          case "onabort":
-          case "onerror":
-          case "onload":
-          case "onloadend":
-          case "onloadstart":
-          case "onprogress":
-          case "ontimeout":
-          case "onreadystatechange": {
-            const [listener] = args;
-            this.registerEvent(
-              methodName,
-              listener
-            );
-            return invoke();
-          }
           default: {
             return invoke();
           }
@@ -328,14 +343,17 @@ var XMLHttpRequestController = class {
     Object.defineProperties(this.request, {
       response: {
         enumerable: true,
+        configurable: false,
         get: () => this.response
       },
       responseText: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseText
       },
       responseXML: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseXML
       }
     });
@@ -549,9 +567,19 @@ function createXMLHttpRequestProxy({
   log
 }) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
-    construct(target, args) {
+    construct(target, args, newTarget) {
       log("constructed new XMLHttpRequest");
-      const originalRequest = Reflect.construct(target, args);
+      const originalRequest = Reflect.construct(target, args, newTarget);
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      );
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        );
+      }
       const requestController = new XMLHttpRequestController(
         originalRequest,
         log

package/lib/node/{chunk-GGD5JOGB.js → chunk-RVLLS44W.js}

@@ -123,12 +123,28 @@ function optionsToProxyHandler(options) {
       return constructorCall.call(newTarget, args, next);
     };
   }
-  if (typeof setProperty !== "undefined") {
-    handler.set = function(target, propertyName, nextValue, receiver) {
-      const next = () => Reflect.set(target, propertyName, nextValue, receiver);
-      return setProperty.call(target, [propertyName, nextValue], next);
+  handler.set = function(target, propertyName, nextValue, receiver) {
+    const next = () => {
+      const ownDescriptors = Reflect.getOwnPropertyDescriptor(
+        target,
+        propertyName
+      );
+      if (typeof (ownDescriptors == null ? void 0 : ownDescriptors.set) !== "undefined") {
+        ownDescriptors.set.apply(target, [nextValue]);
+        return true;
+      }
+      return Reflect.defineProperty(target, propertyName, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: nextValue
+      });
     };
-  }
+    if (typeof setProperty !== "undefined") {
+      return setProperty.call(target, [propertyName, nextValue], next);
+    }
+    return next();
+  };
   handler.get = function(target, propertyName, receiver) {
     const next = () => target[propertyName];
     const value = typeof getProperty !== "undefined" ? getProperty.call(target, [propertyName, receiver], next) : next();
@@ -193,11 +209,25 @@ var XMLHttpRequestController = class {
     this.responseBuffer = new Uint8Array();
     this.request = createProxy(initialRequest, {
       setProperty: ([propertyName, nextValue], invoke) => {
-        if (propertyName === "withCredentials") {
-          define(this.request, "withCredentials", nextValue);
-          return true;
+        switch (propertyName) {
+          case "onabort":
+          case "onerror":
+          case "onload":
+          case "onloadend":
+          case "onloadstart":
+          case "onprogress":
+          case "ontimeout":
+          case "onreadystatechange": {
+            const eventName = propertyName.slice(
+              2
+            );
+            this.request.addEventListener(eventName, nextValue);
+            return invoke();
+          }
+          default: {
+            return invoke();
+          }
         }
-        return invoke();
       },
       methodCall: ([methodName, args], invoke) => {
         var _a;
@@ -261,21 +291,6 @@ var XMLHttpRequestController = class {
             });
             break;
           }
-          case "onabort":
-          case "onerror":
-          case "onload":
-          case "onloadend":
-          case "onloadstart":
-          case "onprogress":
-          case "ontimeout":
-          case "onreadystatechange": {
-            const [listener] = args;
-            this.registerEvent(
-              methodName,
-              listener
-            );
-            return invoke();
-          }
           default: {
             return invoke();
           }
@@ -328,14 +343,17 @@ var XMLHttpRequestController = class {
     Object.defineProperties(this.request, {
       response: {
         enumerable: true,
+        configurable: false,
         get: () => this.response
       },
       responseText: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseText
       },
       responseXML: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseXML
       }
     });
@@ -549,9 +567,19 @@ function createXMLHttpRequestProxy({
   log
 }) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
-    construct(target, args) {
+    construct(target, args, newTarget) {
       log("constructed new XMLHttpRequest");
-      const originalRequest = Reflect.construct(target, args);
+      const originalRequest = Reflect.construct(target, args, newTarget);
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      );
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        );
+      }
       const requestController = new XMLHttpRequestController(
         originalRequest,
         log

package/lib/node/interceptors/XMLHttpRequest/index.js

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkGGD5JOGBjs = require('../../chunk-GGD5JOGB.js');
+var _chunkRVLLS44Wjs = require('../../chunk-RVLLS44W.js');
 require('../../chunk-SNNL2EXF.js');
 require('../../chunk-VQ4DZOBB.js');
 require('../../chunk-ZJOF5MEZ.js');
 require('../../chunk-WWHITCCI.js');
 
 
-exports.XMLHttpRequestInterceptor = _chunkGGD5JOGBjs.XMLHttpRequestInterceptor;
+exports.XMLHttpRequestInterceptor = _chunkRVLLS44Wjs.XMLHttpRequestInterceptor;

package/lib/node/interceptors/XMLHttpRequest/index.mjs

@@ -1,6 +1,6 @@
 import {
   XMLHttpRequestInterceptor
-} from "../../chunk-CYWTKHFI.mjs";
+} from "../../chunk-P7NKDCFD.mjs";
 import "../../chunk-G6ZTHYZQ.mjs";
 import "../../chunk-GFH37L5D.mjs";
 import "../../chunk-STA6QBYM.mjs";

package/lib/node/interceptors/fetch/index.js

@@ -11,6 +11,7 @@ var _chunkWWHITCCIjs = require('../../chunk-WWHITCCI.js');
 
 // src/interceptors/fetch/index.ts
 var _outvariant = require('outvariant');
+var _until = require('@open-draft/until');
 var _FetchInterceptor = class extends _chunkWWHITCCIjs.Interceptor {
   constructor() {
     super(_FetchInterceptor.symbol);
@@ -35,15 +36,25 @@ var _FetchInterceptor = class extends _chunkWWHITCCIjs.Interceptor {
       );
       this.emitter.emit("request", interactiveRequest, requestId);
       this.log("awaiting for the mocked response...");
-      await this.emitter.untilIdle(
-        "request",
-        ({ args: [, pendingRequestId] }) => {
-          return pendingRequestId === requestId;
-        }
-      );
-      this.log("all request listeners have been resolved!");
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked();
-      this.log("event.respondWith called with:", mockedResponse);
+      const [middlewareException, mockedResponse] = await _until.until.call(void 0, async () => {
+        await this.emitter.untilIdle(
+          "request",
+          ({ args: [, pendingRequestId] }) => {
+            return pendingRequestId === requestId;
+          }
+        );
+        this.log("all request listeners have been resolved!");
+        const [mockedResponse2] = await interactiveRequest.respondWith.invoked();
+        this.log("event.respondWith called with:", mockedResponse2);
+        return mockedResponse2;
+      });
+      if (middlewareException) {
+        console.error(`${request.method} ${request.url} net::ERR_FAILED`);
+        const error = Object.assign(new TypeError("Failed to fetch"), {
+          cause: middlewareException
+        });
+        return Promise.reject(error);
+      }
       if (mockedResponse) {
         this.log("received mocked response:", mockedResponse);
         const responseCloine = mockedResponse.clone();

package/lib/node/interceptors/fetch/index.mjs

@@ -11,6 +11,7 @@ import {
 
 // src/interceptors/fetch/index.ts
 import { invariant } from "outvariant";
+import { until } from "@open-draft/until";
 var _FetchInterceptor = class extends Interceptor {
   constructor() {
     super(_FetchInterceptor.symbol);
@@ -35,15 +36,25 @@ var _FetchInterceptor = class extends Interceptor {
       );
       this.emitter.emit("request", interactiveRequest, requestId);
       this.log("awaiting for the mocked response...");
-      await this.emitter.untilIdle(
-        "request",
-        ({ args: [, pendingRequestId] }) => {
-          return pendingRequestId === requestId;
-        }
-      );
-      this.log("all request listeners have been resolved!");
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked();
-      this.log("event.respondWith called with:", mockedResponse);
+      const [middlewareException, mockedResponse] = await until(async () => {
+        await this.emitter.untilIdle(
+          "request",
+          ({ args: [, pendingRequestId] }) => {
+            return pendingRequestId === requestId;
+          }
+        );
+        this.log("all request listeners have been resolved!");
+        const [mockedResponse2] = await interactiveRequest.respondWith.invoked();
+        this.log("event.respondWith called with:", mockedResponse2);
+        return mockedResponse2;
+      });
+      if (middlewareException) {
+        console.error(`${request.method} ${request.url} net::ERR_FAILED`);
+        const error = Object.assign(new TypeError("Failed to fetch"), {
+          cause: middlewareException
+        });
+        return Promise.reject(error);
+      }
       if (mockedResponse) {
         this.log("received mocked response:", mockedResponse);
         const responseCloine = mockedResponse.clone();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mswjs/interceptors",
   "description": "Low-level HTTP/HTTPS/XHR/fetch request interception library.",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "main": "./lib/node/index.js",
   "module": "./lib/node/index.mjs",
   "types": "./lib/node/index.d.ts",
@@ -85,7 +85,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^16.0.0",
-    "@open-draft/test-server": "^0.4.2",
+    "@open-draft/test-server": "^0.5.1",
     "@ossjs/release": "^0.4.0",
     "@playwright/test": "^1.31.1",
     "@types/cors": "^2.8.12",

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -47,17 +47,32 @@ export class XMLHttpRequestController {
 
     this.request = createProxy(initialRequest, {
       setProperty: ([propertyName, nextValue], invoke) => {
-        /**
-         * @note Setting the "withCredentials" property on the XHR proxy
-         * causes the "TypeError: Illegal invocation" error. Instead,
-         * define the property on the original XHR instance itself.
-         */
-        if (propertyName === 'withCredentials') {
-          define(this.request, 'withCredentials', nextValue)
-          return true
-        }
+        switch (propertyName) {
+          case 'onabort':
+          case 'onerror':
+          case 'onload':
+          case 'onloadend':
+          case 'onloadstart':
+          case 'onprogress':
+          case 'ontimeout':
+          case 'onreadystatechange': {
+            const eventName = propertyName.slice(
+              2
+            ) as keyof XMLHttpRequestEventTargetEventMap
+
+            /**
+             * @note Proxy callbacks to event listeners because JSDOM has trouble
+             * translating these properties to callbacks. It seemed to be operating
+             * on events exclusively.
+             */
+            this.request.addEventListener(eventName, nextValue as any)
+            return invoke()
+          }
 
-        return invoke()
+          default: {
+            return invoke()
+          }
+        }
       },
       methodCall: ([methodName, args], invoke) => {
         switch (methodName) {
@@ -85,8 +100,8 @@ export class XMLHttpRequestController {
               keyof XMLHttpRequestEventTargetEventMap,
               Function
             ]
-            this.registerEvent(eventName, listener)
 
+            this.registerEvent(eventName, listener)
             this.log('addEventListener', eventName, listener.name)
 
             return invoke()
@@ -120,8 +135,7 @@ export class XMLHttpRequestController {
                   this.request,
                   /**
                    * The `response` property is the right way to read
-                   * the ambiguous response body, as the request's "responseTyoe"
-                   * may differ.
+                   * the ambiguous response body, as the request's "responseType" may differ.
                    * @see https://xhr.spec.whatwg.org/#the-response-attribute
                    */
                   this.request.response
@@ -171,22 +185,6 @@ export class XMLHttpRequestController {
             break
           }
 
-          case 'onabort':
-          case 'onerror':
-          case 'onload':
-          case 'onloadend':
-          case 'onloadstart':
-          case 'onprogress':
-          case 'ontimeout':
-          case 'onreadystatechange': {
-            const [listener] = args as [Function]
-            this.registerEvent(
-              methodName as keyof XMLHttpRequestEventTargetEventMap,
-              listener
-            )
-            return invoke()
-          }
-
           default: {
             return invoke()
           }
@@ -264,14 +262,17 @@ export class XMLHttpRequestController {
     Object.defineProperties(this.request, {
       response: {
         enumerable: true,
+        configurable: false,
         get: () => this.response,
       },
       responseText: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseText,
       },
       responseXML: {
         enumerable: true,
+        configurable: false,
         get: () => this.responseXML,
       },
     })

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -19,10 +19,28 @@ export function createXMLHttpRequestProxy({
   log,
 }: XMLHttpRequestProxyOptions) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
-    construct(target, args) {
+    construct(target, args, newTarget) {
       log('constructed new XMLHttpRequest')
 
-      const originalRequest = Reflect.construct(target, args)
+      const originalRequest = Reflect.construct(target, args, newTarget)
+
+      /**
+       * @note Forward prototype descriptors onto the proxied object.
+       * XMLHttpRequest is implemented in JSDOM in a way that assigns
+       * a bunch of descriptors, like "set responseType()" on the prototype.
+       * With this propagation, we make sure that those descriptors trigger
+       * when the user operates with the proxied request instance.
+       */
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      )
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        )
+      }
 
       const requestController = new XMLHttpRequestController(
         originalRequest,

package/src/interceptors/XMLHttpRequest/utils/createResponse.ts

@@ -2,7 +2,7 @@ import { stringToHeaders } from 'headers-polyfill'
 
 export function createResponse(
   request: XMLHttpRequest,
-  responseBody: Uint8Array
+  responseBody: BodyInit | null
 ): Response {
   return new Response(responseBody, {
     status: request.status,

package/src/interceptors/fetch/index.ts

@@ -3,6 +3,7 @@ import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
 import { uuidv4 } from '../../utils/uuid'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
+import { until } from '@open-draft/until'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -42,16 +43,28 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       this.log('awaiting for the mocked response...')
 
-      await this.emitter.untilIdle(
-        'request',
-        ({ args: [, pendingRequestId] }) => {
-          return pendingRequestId === requestId
-        }
-      )
-      this.log('all request listeners have been resolved!')
+      const [middlewareException, mockedResponse] = await until(async () => {
+        await this.emitter.untilIdle(
+          'request',
+          ({ args: [, pendingRequestId] }) => {
+            return pendingRequestId === requestId
+          }
+        )
+        this.log('all request listeners have been resolved!')
 
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked()
-      this.log('event.respondWith called with:', mockedResponse)
+        const [mockedResponse] = await interactiveRequest.respondWith.invoked()
+        this.log('event.respondWith called with:', mockedResponse)
+
+        return mockedResponse
+      })
+
+      if (middlewareException) {
+        console.error(`${request.method} ${request.url} net::ERR_FAILED`)
+        const error = Object.assign(new TypeError('Failed to fetch'), {
+          cause: middlewareException,
+        })
+        return Promise.reject(error)
+      }
 
       if (mockedResponse) {
         this.log('received mocked response:', mockedResponse)

package/src/utils/createProxy.test.ts

@@ -0,0 +1,149 @@
+import { vi, it, expect } from 'vitest'
+import { createProxy } from './createProxy'
+
+it('does not interfere with default constructors', () => {
+  const ProxyClass = createProxy(
+    class {
+      constructor(public name: string) {}
+    },
+    {}
+  )
+
+  const instance = new ProxyClass('John')
+  expect(instance.name).toBe('John')
+})
+
+it('does not interfere with default getters', () => {
+  const proxy = createProxy({ foo: 'initial' }, {})
+  expect(proxy.foo).toBe('initial')
+})
+
+it('does not interfere with default setters', () => {
+  const proxy = createProxy({ foo: 'initial' }, {})
+  proxy.foo = 'next'
+
+  expect(proxy.foo).toBe('next')
+})
+
+it('does not interfere with default methods', () => {
+  const proxy = createProxy({ getValue: () => 'initial' }, {})
+  expect(proxy.getValue()).toBe('initial')
+})
+
+it('does not interfere with existing descriptors', () => {
+  const target = {} as { foo: string; bar: number }
+  let internalBar = 0
+
+  Object.defineProperties(target, {
+    foo: {
+      get: () => 'initial',
+    },
+    bar: {
+      set: (value) => {
+        internalBar = value + 10
+      },
+    },
+  })
+
+  const proxy = createProxy(target, {
+    getProperty(data, next) {
+      return next()
+    },
+  })
+  expect(proxy.foo).toBe('initial')
+
+  proxy.bar = 5
+  expect(proxy.bar).toBeUndefined()
+  expect(internalBar).toBe(15)
+})
+
+it('infer prototype descriptors', () => {
+  class Child {
+    ok: boolean
+
+    set status(nextStatus: number) {
+      this.ok = nextStatus >= 200 && nextStatus < 300
+    }
+  }
+
+  Object.defineProperties(Child.prototype, {
+    status: { enumerable: true },
+  })
+
+  const scope = {} as { child: typeof Child }
+
+  Object.defineProperty(scope, 'child', {
+    enumerable: true,
+    value: Child,
+  })
+
+  const ProxyClass = createProxy(scope.child, {})
+  const instance = new ProxyClass()
+
+  instance.status = 201
+  expect(instance.ok).toBe(true)
+})
+
+it('spies on the constructor', () => {
+  const OriginalClass = class {
+    constructor(public name: string, public age: number) {}
+  }
+
+  const constructorCall = vi.fn<
+    [ConstructorParameters<typeof OriginalClass>, Function],
+    typeof OriginalClass
+  >((args, next) => next())
+
+  const ProxyClass = createProxy(OriginalClass, {
+    constructorCall,
+  })
+
+  new ProxyClass('John', 32)
+
+  expect(constructorCall).toHaveBeenCalledTimes(1)
+  expect(constructorCall).toHaveBeenCalledWith(
+    ['John', 32],
+    expect.any(Function)
+  )
+})
+
+it('spies on property getters', () => {
+  const getProperty = vi.fn((args, next) => next())
+  const proxy = createProxy({ foo: 'initial' }, { getProperty })
+
+  proxy.foo
+
+  expect(getProperty).toHaveBeenCalledTimes(1)
+  expect(getProperty).toHaveBeenCalledWith(['foo', proxy], expect.any(Function))
+})
+
+it('spies on property setters', () => {
+  const setProperty = vi.fn((args, next) => next())
+  const proxy = createProxy({ foo: 'initial' }, { setProperty })
+
+  proxy.foo = 'next'
+
+  expect(setProperty).toHaveBeenCalledTimes(1)
+  expect(setProperty).toHaveBeenCalledWith(
+    ['foo', 'next'],
+    expect.any(Function)
+  )
+})
+
+it('spies on method calls', () => {
+  const methodCall = vi.fn((args, next) => next())
+  const proxy = createProxy(
+    {
+      greet: (name: string) => `hello ${name}`,
+    },
+    { methodCall }
+  )
+
+  proxy.greet('Clair')
+
+  expect(methodCall).toHaveBeenCalledTimes(1)
+  expect(methodCall).toHaveBeenCalledWith(
+    ['greet', ['Clair']],
+    expect.any(Function)
+  )
+})

package/src/utils/createProxy.ts

@@ -9,8 +9,8 @@ export interface ProxyOptions<Target extends Record<string, any>> {
 
   setProperty?(
     data: [propertyName: string | symbol, nextValue: unknown],
-    next: NextFunction<void>
-  ): void
+    next: NextFunction<boolean>
+  ): boolean
 
   getProperty?(
     data: [propertyName: string | symbol, receiver: Target],
@@ -25,6 +25,7 @@ export function createProxy<Target extends object>(
   options: ProxyOptions<Target>
 ): Target {
   const proxy = new Proxy(target, optionsToProxyHandler(options))
+
   return proxy
 }
 
@@ -41,11 +42,31 @@ function optionsToProxyHandler<T extends Record<string, any>>(
     }
   }
 
-  if (typeof setProperty !== 'undefined') {
-    handler.set = function (target, propertyName, nextValue, receiver) {
-      const next = () => Reflect.set(target, propertyName, nextValue, receiver)
-      return setProperty.call(target, [propertyName, nextValue], next) as any
+  handler.set = function (target, propertyName, nextValue, receiver) {
+    const next = () => {
+      const ownDescriptors = Reflect.getOwnPropertyDescriptor(
+        target,
+        propertyName
+      )
+
+      if (typeof ownDescriptors?.set !== 'undefined') {
+        ownDescriptors.set.apply(target, [nextValue])
+        return true
+      }
+
+      return Reflect.defineProperty(target, propertyName, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: nextValue,
+      })
+    }
+
+    if (typeof setProperty !== 'undefined') {
+      return setProperty.call(target, [propertyName, nextValue], next)
     }
+
+    return next()
   }
 
   handler.get = function (target, propertyName, receiver) {