msw 2.3.5 → 2.4.1

package/lib/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw",
-  "version": "2.3.5",
+  "version": "2.4.1",
   "description": "Seamless REST/GraphQL API mocking library for browser and Node.js.",
   "main": "./lib/core/index.js",
   "module": "./lib/core/index.mjs",
@@ -122,7 +122,6 @@
     "@types/cookie": "^0.6.0",
     "@types/statuses": "^2.0.4",
     "chalk": "^4.1.2",
-    "graphql": "^16.8.1",
     "headers-polyfill": "^4.0.2",
     "is-node-process": "^1.2.0",
     "outvariant": "^1.4.2",
@@ -143,8 +142,8 @@
     "@types/glob": "^8.1.0",
     "@types/json-bigint": "^1.0.4",
     "@types/node": "18.x",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@web/dev-server": "^0.1.38",
     "axios": "^1.6.5",
     "babel-minify": "^0.5.1",
@@ -161,6 +160,7 @@
     "fs-extra": "^11.2.0",
     "fs-teardown": "^0.3.0",
     "glob": "^10.3.10",
+    "graphql": "^16.8.1",
     "jsdom": "^23.2.0",
     "json-bigint": "^1.0.0",
     "lint-staged": "^15.2.0",
@@ -180,9 +180,13 @@
     "webpack-http-server": "^0.5.0"
   },
   "peerDependencies": {
+    "graphql": ">= 16.8.x",
     "typescript": ">= 4.7.x"
   },
   "peerDependenciesMeta": {
+    "graphql": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }
@@ -200,7 +204,7 @@
   "scripts": {
     "start": "tsup --watch",
     "clean": "rimraf ./lib",
-    "lint": "eslint \"{cli,config,src,test}/**/*.ts\"",
+    "lint": "eslint \"{cli,src}/**/*.ts\"",
     "build": "pnpm clean && cross-env NODE_ENV=production tsup && pnpm patch:dts",
     "patch:dts": "node \"./config/scripts/patch-ts.js\"",
     "check:exports": "node \"./config/scripts/validate-esm.js\"",

package/src/browser/setupWorker/start/createStartHandler.ts

@@ -79,6 +79,7 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
         devUtils.error(
           'Error while checking the worker script integrity. Please report this on GitHub (https://github.com/mswjs/msw/issues), including the original error below.',
         )
+        // eslint-disable-next-line no-console
         console.error(error)
       })
 

package/src/browser/setupWorker/start/utils/printStartMessage.ts

@@ -17,24 +17,30 @@ export function printStartMessage(args: PrintStartMessageArgs = {}) {
 
   const message = args.message || 'Mocking enabled.'
 
+  // eslint-disable-next-line no-console
   console.groupCollapsed(
     `%c${devUtils.formatMessage(message)}`,
     'color:orangered;font-weight:bold;',
   )
+  // eslint-disable-next-line no-console
   console.log(
     '%cDocumentation: %chttps://mswjs.io/docs',
     'font-weight:bold',
     'font-weight:normal',
   )
+  // eslint-disable-next-line no-console
   console.log('Found an issue? https://github.com/mswjs/msw/issues')
 
   if (args.workerUrl) {
+    // eslint-disable-next-line no-console
     console.log('Worker script URL:', args.workerUrl)
   }
 
   if (args.workerScope) {
+    // eslint-disable-next-line no-console
     console.log('Worker scope:', args.workerScope)
   }
 
+  // eslint-disable-next-line no-console
   console.groupEnd()
 }

package/src/browser/setupWorker/stop/utils/printStopMessage.ts

@@ -5,6 +5,7 @@ export function printStopMessage(args: { quiet?: boolean } = {}): void {
     return
   }
 
+  // eslint-disable-next-line no-console
   console.log(
     `%c${devUtils.formatMessage('Mocking disabled.')}`,
     'color:orangered;font-weight:bold;',

package/src/browser/utils/supportsReadableStreamTransfer.ts

@@ -11,7 +11,7 @@ export function supportsReadableStreamTransfer() {
     const message = new MessageChannel()
     message.port1.postMessage(stream, [stream])
     return true
-  } catch (error) {
+  } catch {
     return false
   }
 }

package/src/core/HttpResponse.test.ts

@@ -223,6 +223,36 @@ describe('HttpResponse.xml()', () => {
   })
 })
 
+describe('HttpResponse.html()', () => {
+  it('creates an html response', async () => {
+    const response = HttpResponse.html('<p class="author">Jane Doe</p>')
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<p class="author">Jane Doe</p>')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/html',
+    })
+  })
+
+  it('allows overriding the "Content-Type" response header', async () => {
+    const response = HttpResponse.html('<p class="author">Jane Doe</p>', {
+      headers: {
+        'Content-Type': 'text/html; charset=utf-8',
+      },
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<p class="author">Jane Doe</p>')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/html; charset=utf-8',
+    })
+  })
+})
+
 it('creates an array buffer response', async () => {
   const buffer = new TextEncoder().encode('hello world')
   const response = HttpResponse.arrayBuffer(buffer)

package/src/core/HttpResponse.ts

@@ -125,6 +125,25 @@ export class HttpResponse extends Response {
     return new HttpResponse(body, responseInit)
   }
 
+  /**
+   * Create a `Response` with a `Content-Type: "text/html"` body.
+   * @example
+   * HttpResponse.html(`<p class="author">Jane Doe</p>`)
+   * HttpResponse.html(`<main id="abc-123">Main text</main>`, { status: 201 })
+   */
+  static html<BodyType extends string>(
+    body?: BodyType | null,
+    init?: HttpResponseInit,
+  ): Response {
+    const responseInit = normalizeResponseInit(init)
+
+    if (!responseInit.headers.has('Content-Type')) {
+      responseInit.headers.set('Content-Type', 'text/html')
+    }
+
+    return new HttpResponse(body, responseInit)
+  }
+
   /**
    * Create a `Response` with an `ArrayBuffer` body.
    * @example

package/src/core/handlers/GraphQLHandler.ts

@@ -155,6 +155,7 @@ export class GraphQLHandler extends RequestHandler<
       GraphQLHandler.parsedRequestCache.set(
         request,
         await parseGraphQLRequest(request).catch((error) => {
+          // eslint-disable-next-line no-console
           console.error(error)
           return undefined
         }),
@@ -252,6 +253,7 @@ Consider naming this operation or using "graphql.operation()" request handler to
       ? `${args.parsedResult.operationType} ${args.parsedResult.operationName}`
       : `anonymous ${args.parsedResult.operationType}`
 
+    // eslint-disable-next-line no-console
     console.groupCollapsed(
       devUtils.formatMessage(
         `${getTimestamp()} ${requestInfo} (%c${loggedResponse.status} ${
@@ -261,9 +263,13 @@ Consider naming this operation or using "graphql.operation()" request handler to
       `color:${statusColor}`,
       'color:inherit',
     )
+    // eslint-disable-next-line no-console
     console.log('Request:', loggedRequest)
+    // eslint-disable-next-line no-console
     console.log('Handler:', this)
+    // eslint-disable-next-line no-console
     console.log('Response:', loggedResponse)
+    // eslint-disable-next-line no-console
     console.groupEnd()
   }
 }

package/src/core/handlers/HttpHandler.ts

@@ -152,6 +152,7 @@ export class HttpHandler extends RequestHandler<
     const loggedResponse = await serializeResponse(args.response)
     const statusColor = getStatusCodeColor(loggedResponse.status)
 
+    // eslint-disable-next-line no-console
     console.groupCollapsed(
       devUtils.formatMessage(
         `${getTimestamp()} ${args.request.method} ${publicUrl} (%c${
@@ -161,9 +162,13 @@ export class HttpHandler extends RequestHandler<
       `color:${statusColor}`,
       'color:inherit',
     )
+    // eslint-disable-next-line no-console
     console.log('Request', loggedRequest)
+    // eslint-disable-next-line no-console
     console.log('Handler:', this)
+    // eslint-disable-next-line no-console
     console.log('Response', loggedResponse)
+    // eslint-disable-next-line no-console
     console.groupEnd()
   }
 }

package/src/core/utils/internal/devUtils.ts

@@ -14,6 +14,7 @@ function formatMessage(message: string, ...positionals: any[]): string {
  * Prints a library-specific warning.
  */
 function warn(message: string, ...positionals: any[]): void {
+  // eslint-disable-next-line no-console
   console.warn(formatMessage(message, ...positionals))
 }
 
@@ -21,6 +22,7 @@ function warn(message: string, ...positionals: any[]): void {
  * Prints a library-specific error.
  */
 function error(message: string, ...positionals: any[]): void {
+  // eslint-disable-next-line no-console
   console.error(formatMessage(message, ...positionals))
 }
 

package/src/core/utils/internal/jsonParse.ts

@@ -7,7 +7,7 @@ export function jsonParse<ValueType extends Record<string, any>>(
 ): ValueType | undefined {
   try {
     return JSON.parse(value)
-  } catch (error) {
+  } catch {
     return undefined
   }
 }

package/src/core/utils/internal/parseGraphQLRequest.ts

@@ -3,7 +3,6 @@ import type {
   OperationDefinitionNode,
   OperationTypeNode,
 } from 'graphql'
-import { parse } from 'graphql'
 import type { GraphQLVariables } from '../../handlers/GraphQLHandler'
 import { toPublicUrl } from '../request/toPublicUrl'
 import { devUtils } from './devUtils'
@@ -40,7 +39,14 @@ export function parseDocumentNode(node: DocumentNode): ParsedGraphQLQuery {
   }
 }
 
-function parseQuery(query: string): ParsedGraphQLQuery | Error {
+async function parseQuery(query: string): Promise<ParsedGraphQLQuery | Error> {
+  const { parse } = await import('graphql').catch((error) => {
+    devUtils.error(
+      'Failed to parse a GraphQL query: cannot import the "graphql" module. Please make sure you install it if you wish to intercept GraphQL requests. See the original import error below.',
+    )
+    throw error
+  })
+
   try {
     const ast = parse(query)
     return parseDocumentNode(ast)
@@ -181,7 +187,7 @@ export async function parseGraphQLRequest(
   }
 
   const { query, variables } = input
-  const parsedResult = parseQuery(query)
+  const parsedResult = await parseQuery(query)
 
   if (parsedResult instanceof Error) {
     const requestPublicUrl = toPublicUrl(request.url)

package/src/core/utils/internal/parseMultipartData.ts

@@ -98,7 +98,7 @@ export function parseMultipartData<T extends DefaultRequestMultipartBody>(
     }
 
     return parsedBody as T
-  } catch (error) {
+  } catch {
     return undefined
   }
 }

package/src/core/utils/request/onUnhandledRequest.test.ts

@@ -12,6 +12,15 @@ const fixtures = {
 
   • GET ${url}
 
+If you still wish to intercept this unhandled request, please create a request handler for it.
+Read more: https://mswjs.io/docs/getting-started/mocks`,
+  warningWithResponseBody: (url = `/api`) => `\
+[MSW] Warning: intercepted a request without a matching request handler:
+
+  • POST ${url}
+
+  • Request body: {\"variables\":{\"id\":\"abc-123\"},\"query\":\"query UserName($id: String!) { user(id: $id) { name } }\"}
+
 If you still wish to intercept this unhandled request, please create a request handler for it.
 Read more: https://mswjs.io/docs/getting-started/mocks`,
 
@@ -51,6 +60,25 @@ test('supports the "warn" request strategy', async () => {
   )
 })
 
+test('supports the "warn" request strategy with request body', async () => {
+  await onUnhandledRequest(
+    new Request(new URL('http://localhost/api'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        variables: {
+          id: 'abc-123',
+        },
+        query: 'query UserName($id: String!) { user(id: $id) { name } }',
+      }),
+    }),
+  )
+
+  expect(console.warn).toHaveBeenCalledWith(fixtures.warningWithResponseBody())
+})
+
 test('supports the "error" request strategy', async () => {
   await expect(
     onUnhandledRequest(new Request(new URL('http://localhost/api')), 'error'),

package/src/core/utils/request/onUnhandledRequest.ts

@@ -24,7 +24,12 @@ export async function onUnhandledRequest(
   const url = new URL(request.url)
   const publicUrl = toPublicUrl(url) + url.search
 
-  const unhandledRequestMessage = `intercepted a request without a matching request handler:\n\n  \u2022 ${request.method} ${publicUrl}\n\nIf you still wish to intercept this unhandled request, please create a request handler for it.\nRead more: https://mswjs.io/docs/getting-started/mocks`
+  const requestBody =
+    request.method === 'HEAD' || request.method === 'GET'
+      ? null
+      : await request.clone().text()
+  const messageDetails = `\n\n  \u2022 ${request.method} ${publicUrl}\n\n${requestBody ? `  \u2022 Request body: ${requestBody}\n\n` : ''}`
+  const unhandledRequestMessage = `intercepted a request without a matching request handler:${messageDetails}If you still wish to intercept this unhandled request, please create a request handler for it.\nRead more: https://mswjs.io/docs/getting-started/mocks`
 
   function applyStrategy(strategy: UnhandledRequestStrategy) {
     switch (strategy) {