update msw to 2.6.4 (#125)

Author: kettanaito

examples/with-angular/README.md

@@ -12,3 +12,7 @@
 
 1. Create [`src/mocks/browser.ts`](./src/mocks/browser.ts) and configure the `worker` instance.
 1. In [`src/main.ts`](./src/main.ts), start the worker instance. Defer your application's rendering by implementing a `prepareApp()` function.
+
+## Tests with Jest
+
+If you are using Jest, make sure to provide [`jest-fixed-jsdom`](https://github.com/mswjs/jest-fixed-jsdom) as the custom `testEnvironment` in your [`jest.config.js`](./jest.config.js) file.

examples/with-angular/jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   preset: 'jest-preset-angular',
+  testEnvironment: 'jest-fixed-jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   globalSetup: 'jest-preset-angular/global-setup',
   testEnvironmentOptions: {
@@ -9,6 +10,6 @@ module.exports = {
     Request,
     Response,
     TextEncoder,
-    TextDecoder
+    TextDecoder,
   },
 }

examples/with-angular/package.json

@@ -36,8 +36,9 @@
     "cypress": "^12.11.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "jest-preset-angular": "13.0.1",
-    "msw": "2.2.2",
+    "msw": "2.6.4",
     "start-server-and-test": "^2.0.0",
     "tslib": "2.3.0",
     "typescript": "~4.9"

examples/with-angular/src/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.2.2).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.6.4'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -58,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -151,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -179,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }
@@ -202,13 +217,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +248,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }

examples/with-jest/package.json

@@ -9,7 +9,7 @@
     "@types/jest": "^29.5.1",
     "@types/node": "^18",
     "jest": "^29.5.0",
-    "msw": "2.2.2",
+    "msw": "2.6.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.0.4",
     "with-angular": "workspace:*",

examples/with-karma/package.json

@@ -12,7 +12,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
-    "msw": "2.2.2",
+    "msw": "2.6.4",
     "webpack": "^5.81.0"
   },
   "msw": {

examples/with-karma/test/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.2.2).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.6.4'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -58,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -151,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -179,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }
@@ -202,13 +217,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +248,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }

examples/with-playwright/app/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.2.2).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.6.4'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -58,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -151,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -179,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }
@@ -202,13 +217,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +248,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }

examples/with-playwright/package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@playwright/test": "^1.40.1",
     "@web/dev-server": "^0.2.1",
-    "msw": "2.2.2",
+    "msw": "2.6.4",
     "playwright": "^1.33.0",
     "typescript": "^5.0.4"
   },

examples/with-remix/package.json

@@ -26,7 +26,7 @@
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "eslint": "^8.38.0",
-    "msw": "2.2.2",
+    "msw": "2.6.4",
     "playwright": "^1.33.0",
     "typescript": "^4.9.5"
   },