msw 0.33.3 → 0.36.1

package/lib/esm/RequestHandler-deps.js

@@ -1,4 +1,5 @@
 import { c as commonjsGlobal, l as lib$1, j as jsonParse, s as status, b as set, e as delay, f as fetch } from './fetch-deps.js';
+import { getCleanUrl } from '@mswjs/interceptors/lib/utils/getCleanUrl';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -279,25 +280,25 @@ function parseMultipartData(data, headers) {
 }
 
 /**
- * Parses a given request/response body based on the `Content-Type` header.
+ * Parses a given request/response body based on the "Content-Type" header.
  */
 function parseBody(body, headers) {
     // Return whatever falsey body value is given.
     if (!body) {
         return body;
     }
-    const contentType = headers === null || headers === void 0 ? void 0 : headers.get('content-type');
+    const contentType = (headers === null || headers === void 0 ? void 0 : headers.get('content-type')) || '';
     // If the body has a Multipart Content-Type
     // parse it into an object.
-    const hasMultipartContent = contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('multipart/form-data');
+    const hasMultipartContent = contentType.startsWith('multipart/form-data');
     if (hasMultipartContent && typeof body !== 'object') {
-        return parseMultipartData(body, headers) || body;
+        return parseMultipartData(body.toString(), headers) || body;
     }
     // If the intercepted request's body has a JSON Content-Type
     // parse it into an object.
-    const hasJsonContent = contentType === null || contentType === void 0 ? void 0 : contentType.includes('json');
+    const hasJsonContent = contentType.includes('json');
     if (hasJsonContent && typeof body !== 'object') {
-        return jsonParse(body) || body;
+        return jsonParse(body.toString()) || body;
     }
     // Otherwise leave as-is.
     return body;
@@ -361,57 +362,339 @@ function prepareResponse(res) {
         body: parseBody(res.body, responseHeaders) });
 }
 
-/**
- * Converts a string path to a Regular Expression.
- * Transforms path parameters into named RegExp groups.
- */
-const pathToRegExp = (path) => {
-    const pattern = path
-        // Escape literal dots
-        .replace(/\./g, '\\.')
-        // Escape literal slashes
-        .replace(/\//g, '/')
-        // Escape literal question marks
-        .replace(/\?/g, '\\?')
-        // Ignore trailing slashes
-        .replace(/\/+$/, '')
-        // Replace wildcard with any zero-to-any character sequence
-        .replace(/\*+/g, '.*')
-        // Replace parameters with named capturing groups
-        .replace(/:([^\d|^\/][a-zA-Z0-9_]*(?=(?:\/|\\.)|$))/g, (_, paramName) => `(?<${paramName}>[^\/]+?)`)
-        // Allow optional trailing slash
-        .concat('(\\/|$)');
-    return new RegExp(pattern, 'gi');
-};
-
-/**
- * Matches a given url against a path.
- */
-const match = (path, url) => {
-    const expression = path instanceof RegExp ? path : pathToRegExp(path);
-    const match = expression.exec(url) || false;
-    // Matches in strict mode: match string should equal to input (url)
-    // Otherwise loose matches will be considered truthy:
-    // match('/messages/:id', '/messages/123/users') // true
-    const matches = path instanceof RegExp ? !!match : !!match && match[0] === match.input;
-    return {
-        matches,
-        params: match && matches ? match.groups || null : null,
-    };
-};
-
-var getCleanUrl$1 = {};
-
-Object.defineProperty(getCleanUrl$1, "__esModule", { value: true });
-var getCleanUrl_2 = getCleanUrl$1.getCleanUrl = void 0;
 /**
- * Removes query parameters and hashes from a given URL.
+ * Tokenize input string.
+ */
+function lexer(str) {
+    var tokens = [];
+    var i = 0;
+    while (i < str.length) {
+        var char = str[i];
+        if (char === "*" || char === "+" || char === "?") {
+            tokens.push({ type: "MODIFIER", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === "\\") {
+            tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] });
+            continue;
+        }
+        if (char === "{") {
+            tokens.push({ type: "OPEN", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === "}") {
+            tokens.push({ type: "CLOSE", index: i, value: str[i++] });
+            continue;
+        }
+        if (char === ":") {
+            var name = "";
+            var j = i + 1;
+            while (j < str.length) {
+                var code = str.charCodeAt(j);
+                if (
+                // `0-9`
+                (code >= 48 && code <= 57) ||
+                    // `A-Z`
+                    (code >= 65 && code <= 90) ||
+                    // `a-z`
+                    (code >= 97 && code <= 122) ||
+                    // `_`
+                    code === 95) {
+                    name += str[j++];
+                    continue;
+                }
+                break;
+            }
+            if (!name)
+                throw new TypeError("Missing parameter name at " + i);
+            tokens.push({ type: "NAME", index: i, value: name });
+            i = j;
+            continue;
+        }
+        if (char === "(") {
+            var count = 1;
+            var pattern = "";
+            var j = i + 1;
+            if (str[j] === "?") {
+                throw new TypeError("Pattern cannot start with \"?\" at " + j);
+            }
+            while (j < str.length) {
+                if (str[j] === "\\") {
+                    pattern += str[j++] + str[j++];
+                    continue;
+                }
+                if (str[j] === ")") {
+                    count--;
+                    if (count === 0) {
+                        j++;
+                        break;
+                    }
+                }
+                else if (str[j] === "(") {
+                    count++;
+                    if (str[j + 1] !== "?") {
+                        throw new TypeError("Capturing groups are not allowed at " + j);
+                    }
+                }
+                pattern += str[j++];
+            }
+            if (count)
+                throw new TypeError("Unbalanced pattern at " + i);
+            if (!pattern)
+                throw new TypeError("Missing pattern at " + i);
+            tokens.push({ type: "PATTERN", index: i, value: pattern });
+            i = j;
+            continue;
+        }
+        tokens.push({ type: "CHAR", index: i, value: str[i++] });
+    }
+    tokens.push({ type: "END", index: i, value: "" });
+    return tokens;
+}
+/**
+ * Parse a string for the raw tokens.
+ */
+function parse(str, options) {
+    if (options === void 0) { options = {}; }
+    var tokens = lexer(str);
+    var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a;
+    var defaultPattern = "[^" + escapeString(options.delimiter || "/#?") + "]+?";
+    var result = [];
+    var key = 0;
+    var i = 0;
+    var path = "";
+    var tryConsume = function (type) {
+        if (i < tokens.length && tokens[i].type === type)
+            return tokens[i++].value;
+    };
+    var mustConsume = function (type) {
+        var value = tryConsume(type);
+        if (value !== undefined)
+            return value;
+        var _a = tokens[i], nextType = _a.type, index = _a.index;
+        throw new TypeError("Unexpected " + nextType + " at " + index + ", expected " + type);
+    };
+    var consumeText = function () {
+        var result = "";
+        var value;
+        // tslint:disable-next-line
+        while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) {
+            result += value;
+        }
+        return result;
+    };
+    while (i < tokens.length) {
+        var char = tryConsume("CHAR");
+        var name = tryConsume("NAME");
+        var pattern = tryConsume("PATTERN");
+        if (name || pattern) {
+            var prefix = char || "";
+            if (prefixes.indexOf(prefix) === -1) {
+                path += prefix;
+                prefix = "";
+            }
+            if (path) {
+                result.push(path);
+                path = "";
+            }
+            result.push({
+                name: name || key++,
+                prefix: prefix,
+                suffix: "",
+                pattern: pattern || defaultPattern,
+                modifier: tryConsume("MODIFIER") || ""
+            });
+            continue;
+        }
+        var value = char || tryConsume("ESCAPED_CHAR");
+        if (value) {
+            path += value;
+            continue;
+        }
+        if (path) {
+            result.push(path);
+            path = "";
+        }
+        var open = tryConsume("OPEN");
+        if (open) {
+            var prefix = consumeText();
+            var name_1 = tryConsume("NAME") || "";
+            var pattern_1 = tryConsume("PATTERN") || "";
+            var suffix = consumeText();
+            mustConsume("CLOSE");
+            result.push({
+                name: name_1 || (pattern_1 ? key++ : ""),
+                pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1,
+                prefix: prefix,
+                suffix: suffix,
+                modifier: tryConsume("MODIFIER") || ""
+            });
+            continue;
+        }
+        mustConsume("END");
+    }
+    return result;
+}
+/**
+ * Create path match function from `path-to-regexp` spec.
+ */
+function match(str, options) {
+    var keys = [];
+    var re = pathToRegexp(str, keys, options);
+    return regexpToFunction(re, keys, options);
+}
+/**
+ * Create a path match function from `path-to-regexp` output.
  */
-function getCleanUrl(url, isAbsolute) {
-    if (isAbsolute === void 0) { isAbsolute = true; }
-    return [isAbsolute && url.origin, url.pathname].filter(Boolean).join('');
+function regexpToFunction(re, keys, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.decode, decode = _a === void 0 ? function (x) { return x; } : _a;
+    return function (pathname) {
+        var m = re.exec(pathname);
+        if (!m)
+            return false;
+        var path = m[0], index = m.index;
+        var params = Object.create(null);
+        var _loop_1 = function (i) {
+            // tslint:disable-next-line
+            if (m[i] === undefined)
+                return "continue";
+            var key = keys[i - 1];
+            if (key.modifier === "*" || key.modifier === "+") {
+                params[key.name] = m[i].split(key.prefix + key.suffix).map(function (value) {
+                    return decode(value, key);
+                });
+            }
+            else {
+                params[key.name] = decode(m[i], key);
+            }
+        };
+        for (var i = 1; i < m.length; i++) {
+            _loop_1(i);
+        }
+        return { path: path, index: index, params: params };
+    };
+}
+/**
+ * Escape a regular expression string.
+ */
+function escapeString(str) {
+    return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
+}
+/**
+ * Get the flags for a regexp from the options.
+ */
+function flags(options) {
+    return options && options.sensitive ? "" : "i";
+}
+/**
+ * Pull out keys from a regexp.
+ */
+function regexpToRegexp(path, keys) {
+    if (!keys)
+        return path;
+    var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g;
+    var index = 0;
+    var execResult = groupsRegex.exec(path.source);
+    while (execResult) {
+        keys.push({
+            // Use parenthesized substring match if available, index otherwise
+            name: execResult[1] || index++,
+            prefix: "",
+            suffix: "",
+            modifier: "",
+            pattern: ""
+        });
+        execResult = groupsRegex.exec(path.source);
+    }
+    return path;
+}
+/**
+ * Transform an array into a regexp.
+ */
+function arrayToRegexp(paths, keys, options) {
+    var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; });
+    return new RegExp("(?:" + parts.join("|") + ")", flags(options));
+}
+/**
+ * Create a path regexp from string input.
+ */
+function stringToRegexp(path, keys, options) {
+    return tokensToRegexp(parse(path, options), keys, options);
+}
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ */
+function tokensToRegexp(tokens, keys, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.strict, strict = _a === void 0 ? false : _a, _b = options.start, start = _b === void 0 ? true : _b, _c = options.end, end = _c === void 0 ? true : _c, _d = options.encode, encode = _d === void 0 ? function (x) { return x; } : _d;
+    var endsWith = "[" + escapeString(options.endsWith || "") + "]|$";
+    var delimiter = "[" + escapeString(options.delimiter || "/#?") + "]";
+    var route = start ? "^" : "";
+    // Iterate over the tokens and create our regexp string.
+    for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
+        var token = tokens_1[_i];
+        if (typeof token === "string") {
+            route += escapeString(encode(token));
+        }
+        else {
+            var prefix = escapeString(encode(token.prefix));
+            var suffix = escapeString(encode(token.suffix));
+            if (token.pattern) {
+                if (keys)
+                    keys.push(token);
+                if (prefix || suffix) {
+                    if (token.modifier === "+" || token.modifier === "*") {
+                        var mod = token.modifier === "*" ? "?" : "";
+                        route += "(?:" + prefix + "((?:" + token.pattern + ")(?:" + suffix + prefix + "(?:" + token.pattern + "))*)" + suffix + ")" + mod;
+                    }
+                    else {
+                        route += "(?:" + prefix + "(" + token.pattern + ")" + suffix + ")" + token.modifier;
+                    }
+                }
+                else {
+                    route += "(" + token.pattern + ")" + token.modifier;
+                }
+            }
+            else {
+                route += "(?:" + prefix + suffix + ")" + token.modifier;
+            }
+        }
+    }
+    if (end) {
+        if (!strict)
+            route += delimiter + "?";
+        route += !options.endsWith ? "$" : "(?=" + endsWith + ")";
+    }
+    else {
+        var endToken = tokens[tokens.length - 1];
+        var isEndDelimited = typeof endToken === "string"
+            ? delimiter.indexOf(endToken[endToken.length - 1]) > -1
+            : // tslint:disable-next-line
+                endToken === undefined;
+        if (!strict) {
+            route += "(?:" + delimiter + "(?=" + endsWith + "))?";
+        }
+        if (!isEndDelimited) {
+            route += "(?=" + delimiter + "|" + endsWith + ")";
+        }
+    }
+    return new RegExp(route, flags(options));
+}
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ */
+function pathToRegexp(path, keys, options) {
+    if (path instanceof RegExp)
+        return regexpToRegexp(path, keys);
+    if (Array.isArray(path))
+        return arrayToRegexp(path, keys, options);
+    return stringToRegexp(path, keys, options);
 }
-getCleanUrl_2 = getCleanUrl$1.getCleanUrl = getCleanUrl;
 
 const REDUNDANT_CHARACTERS_EXP = /[\?|#].*$/g;
 function getSearchParams(path) {
@@ -433,9 +716,12 @@ function getAbsoluteUrl(path, baseUrl) {
         return path;
     }
     // Resolve a relative request URL against a given custom "baseUrl"
-    // or the current location (in the case of browser/browser-like environments).
-    const origin = baseUrl || (typeof location !== 'undefined' && location.origin);
-    return origin ? new URL(path, origin).href : path;
+    // or the document baseURI (in the case of browser/browser-like environments).
+    const origin = baseUrl || (typeof document !== 'undefined' && document.baseURI);
+    return origin
+        ? // Encode and decode the path to preserve escaped characters.
+            decodeURI(new URL(encodeURI(path), origin).href)
+        : path;
 }
 
 /**
@@ -454,12 +740,48 @@ function normalizePath(path, baseUrl) {
     return cleanUrl(maybeAbsoluteUrl);
 }
 
+/**
+ * Coerce a path supported by MSW into a path
+ * supported by "path-to-regexp".
+ */
+function coercePath(path) {
+    return (path
+        /**
+         * Replace wildcards ("*") with unnamed capturing groups
+         * because "path-to-regexp" doesn't support wildcards.
+         * Ignore path parameter' modifiers (i.e. ":name*").
+         */
+        .replace(/([:a-zA-Z_-]*)(\*{1,2})+/g, (_, parameterName, wildcard) => {
+        const expression = '(.*)';
+        if (!parameterName) {
+            return expression;
+        }
+        return parameterName.startsWith(':')
+            ? `${parameterName}${wildcard}`
+            : `${parameterName}${expression}`;
+    })
+        /**
+         * Escape the protocol so that "path-to-regexp" could match
+         * absolute URL.
+         * @see https://github.com/pillarjs/path-to-regexp/issues/259
+         */
+        .replace(/^([^\/]+)(:)(?=\/\/)/g, '$1\\$2'));
+}
 /**
  * Returns the result of matching given request URL against a mask.
  */
 function matchRequestUrl(url, path, baseUrl) {
     const normalizedPath = normalizePath(path, baseUrl);
-    return match(normalizedPath, getCleanUrl_2(url));
+    const cleanPath = typeof normalizedPath === 'string'
+        ? coercePath(normalizedPath)
+        : normalizedPath;
+    const cleanUrl = getCleanUrl(url);
+    const result = match(cleanPath, { decode: decodeURIComponent })(cleanUrl);
+    const params = (result && result.params) || {};
+    return {
+        matches: result !== false,
+        params,
+    };
 }
 
 /**
@@ -508,18 +830,21 @@ const response = Object.assign(createResponseComposition(), {
     },
 });
 
+const BUILD_FRAME = /(node_modules)?[\/\\]lib[\/\\](umd|esm|iief|cjs)[\/\\]|^[^\/\\]*$/;
 /**
  * Return the stack trace frame of a function's invocation.
  */
-function getCallFrame() {
+function getCallFrame(error) {
     // In <IE11, new Error may return an undefined stack
-    const stack = (new Error().stack || '');
-    const frames = stack.split('\n');
+    const stack = error.stack;
+    if (!stack) {
+        return;
+    }
+    const frames = stack.split('\n').slice(1);
     // Get the first frame that doesn't reference the library's internal trace.
     // Assume that frame is the invocation frame.
-    const ignoreFrameRegExp = /(node_modules)?[\/\\]lib[\/\\](umd|esm|iief|cjs)[\/\\]|^[^\/\\]*$/;
-    const declarationFrame = frames.slice(1).find((frame) => {
-        return !ignoreFrameRegExp.test(frame);
+    const declarationFrame = frames.find((frame) => {
+        return !BUILD_FRAME.test(frame);
     });
     if (!declarationFrame) {
         return;
@@ -552,7 +877,7 @@ class RequestHandler {
         this.shouldSkip = false;
         this.ctx = options.ctx || defaultContext;
         this.resolver = options.resolver;
-        const callFrame = getCallFrame();
+        const callFrame = getCallFrame(new Error());
         this.info = Object.assign(Object.assign({}, options.info), { callFrame });
     }
     /**
@@ -630,4 +955,4 @@ class RequestHandler {
     }
 }
 
-export { NetworkError as N, RequestHandler as R, __awaiter as _, getCleanUrl$1 as a, defaultResponse as b, createResponseComposition as c, devUtils as d, defaultContext as e, compose as f, getPublicUrlFromRequest as g, cleanUrl as h, getSearchParams as i, prepareRequest as j, prepareResponse as k, getStatusCodeColor as l, matchRequestUrl as m, getTimestamp as n, __rest as o, parseBody as p, response as r };
+export { NetworkError as N, RequestHandler as R, __awaiter as _, defaultResponse as a, defaultContext as b, createResponseComposition as c, devUtils as d, compose as e, cleanUrl as f, getPublicUrlFromRequest as g, getSearchParams as h, prepareRequest as i, prepareResponse as j, getStatusCodeColor as k, getTimestamp as l, matchRequestUrl as m, __rest as n, parseBody as p, response as r };

package/lib/esm/errors-deps.js

@@ -41,6 +41,20 @@ const data = (payload) => {
     };
 };
 
+/**
+ * Sets the GraphQL extensions on a given response.
+ * @example
+ * res(ctx.extensions({ tracing: { version: 1 }}))
+ * @see {@link https://mswjs.io/docs/api/context/extensions `ctx.extensions()`}
+ */
+const extensions = (payload) => {
+    return (res) => {
+        const prevBody = jsonParse(res.body) || {};
+        const nextBody = mergeRight(prevBody, { extensions: payload });
+        return json(nextBody)(res);
+    };
+};
+
 /**
  * Sets a given list of GraphQL errors on the mocked response.
  * @example res(ctx.errors([{ message: 'Unauthorized' }]))
@@ -57,4 +71,4 @@ const errors = (errorsList) => {
     };
 };
 
-export { data as d, errors as e, mergeRight as m };
+export { errors as a, data as d, extensions as e, mergeRight as m };

package/lib/esm/fetch-deps.js

@@ -851,12 +851,12 @@ const cookie = (name, value, options) => {
 };
 
 /**
- * Parses a given string into a JSON.
+ * Parses a given value into a JSON.
  * Does not throw an exception on an invalid JSON string.
  */
-function jsonParse(str) {
+function jsonParse(value) {
     try {
-        return JSON.parse(str);
+        return JSON.parse(value);
     }
     catch (error) {
         return undefined;
@@ -974,8 +974,12 @@ const createFetchRequestParameters = (input) => {
     if (['GET', 'HEAD'].includes(method)) {
         return requestParameters;
     }
-    requestParameters.body =
-        typeof body === 'object' ? JSON.stringify(body) : body;
+    if (typeof body === 'object' || typeof body === 'number') {
+        requestParameters.body = JSON.stringify(body);
+    }
+    else {
+        requestParameters.body = body;
+    }
     return requestParameters;
 };
 /**

package/lib/esm/graphql-deps.js

@@ -1,6 +1,6 @@
 import { j as jsonParse, b as set, s as status, e as delay, f as fetch, d as cookie } from './fetch-deps.js';
-import { d as data, e as errors } from './errors-deps.js';
-import { g as getPublicUrlFromRequest, d as devUtils, o as __rest, R as RequestHandler, m as matchRequestUrl, j as prepareRequest, k as prepareResponse, l as getStatusCodeColor, n as getTimestamp } from './RequestHandler-deps.js';
+import { d as data, e as extensions, a as errors } from './errors-deps.js';
+import { g as getPublicUrlFromRequest, d as devUtils, n as __rest, R as RequestHandler, m as matchRequestUrl, i as prepareRequest, j as prepareResponse, k as getStatusCodeColor, l as getTimestamp } from './RequestHandler-deps.js';
 
 function _typeof$3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$3 = function _typeof(obj) { return typeof obj; }; } else { _typeof$3 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$3(obj); }
 
@@ -457,6 +457,7 @@ function invariant(condition, message) {
 
 // istanbul ignore next (See: 'https://github.com/graphql/graphql-js/issues/2317')
 var nodejsCustomInspectSymbol = typeof Symbol === 'function' && typeof Symbol.for === 'function' ? Symbol.for('nodejs.util.inspect.custom') : undefined;
+var nodejsCustomInspectSymbol$1 = nodejsCustomInspectSymbol;
 
 /**
  * The `defineInspect()` function defines `inspect()` prototype method as alias of `toJSON`
@@ -467,8 +468,8 @@ function defineInspect(classObject) {
   typeof fn === 'function' || invariant(0);
   classObject.prototype.inspect = fn; // istanbul ignore else (See: 'https://github.com/graphql/graphql-js/issues/2317')
 
-  if (nodejsCustomInspectSymbol) {
-    classObject.prototype[nodejsCustomInspectSymbol] = fn;
+  if (nodejsCustomInspectSymbol$1) {
+    classObject.prototype[nodejsCustomInspectSymbol$1] = fn;
   }
 }
 
@@ -711,7 +712,7 @@ function formatArray(array, seenValues) {
 }
 
 function getCustomFn(object) {
-  var customInspectFn = object[String(nodejsCustomInspectSymbol)];
+  var customInspectFn = object[String(nodejsCustomInspectSymbol$1)];
 
   if (typeof customInspectFn === 'function') {
     return customInspectFn;
@@ -3242,6 +3243,7 @@ const graphqlContext = {
     delay,
     fetch,
     data,
+    extensions,
     errors,
     cookie,
 };
@@ -3288,10 +3290,10 @@ class GraphQLHandler extends RequestHandler {
         if (!parsedResult) {
             return false;
         }
-        if (!parsedResult.operationName) {
+        if (!parsedResult.operationName && this.info.operationType !== 'all') {
             const publicUrl = getPublicUrlFromRequest(request);
             devUtils.warn(`\
-Failed to intercept a GraphQL request at "${request.method} ${publicUrl}": unnamed GraphQL operations are not supported.
+Failed to intercept a GraphQL request at "${request.method} ${publicUrl}": anonymous GraphQL operations are not supported.
 
 Consider naming this operation or using "graphql.operation" request handler to intercept GraphQL requests regardless of their operation name/type. Read more: https://mswjs.io/docs/api/graphql/operation\
       `);
@@ -3301,7 +3303,7 @@ Consider naming this operation or using "graphql.operation" request handler to i
         const hasMatchingOperationType = this.info.operationType === 'all' ||
             parsedResult.operationType === this.info.operationType;
         const hasMatchingOperationName = this.info.operationName instanceof RegExp
-            ? this.info.operationName.test(parsedResult.operationName)
+            ? this.info.operationName.test(parsedResult.operationName || '')
             : parsedResult.operationName === this.info.operationName;
         return (hasMatchingUrl.matches &&
             hasMatchingOperationType &&
@@ -3311,7 +3313,10 @@ Consider naming this operation or using "graphql.operation" request handler to i
         const loggedRequest = prepareRequest(request);
         const loggedResponse = prepareResponse(response);
         const statusColor = getStatusCodeColor(response.status);
-        console.groupCollapsed(devUtils.formatMessage('%s %s (%c%s%c)'), getTimestamp(), `${parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationType} ${parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationName}`, `color:${statusColor}`, `${response.status} ${response.statusText}`, 'color:inherit');
+        const requestInfo = (parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationName)
+            ? `${parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationType} ${parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationName}`
+            : `anonymous ${parsedRequest === null || parsedRequest === void 0 ? void 0 : parsedRequest.operationType}`;
+        console.groupCollapsed(devUtils.formatMessage('%s %s (%c%s%c)'), getTimestamp(), `${requestInfo}`, `color:${statusColor}`, `${response.status} ${response.statusText}`, 'color:inherit');
         console.log('Request:', loggedRequest);
         console.log('Handler:', this);
         console.log('Response:', loggedResponse);

package/lib/esm/graphql.js

@@ -2,3 +2,4 @@ export { g as graphql } from './graphql-deps.js';
 import './fetch-deps.js';
 import './errors-deps.js';
 import './RequestHandler-deps.js';
+import '@mswjs/interceptors/lib/utils/getCleanUrl';