update msw (mock service worker) package to 2.5.1 (#23480)

relates to #23128

updates mock service worker package as it was using a version of
`path-to-regexp` that had a high security vulnerability. This updated
version of msw uses a newer version of the package that does not have
this vulnerability

I had to add the `jest-fixed-dom` package to update msw as well as
update our version of typescript to 4.7

changes/23128-update-mock-service-worker-package-for-secutiy

@@ -0,0 +1 @@
+- update a package used for testing (msw) to improve security

frontend/test/handlers/activity-handlers.ts

@@ -1,61 +1,52 @@
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import createMockActivity from "__mocks__/activityMock";
 import { baseUrl } from "test/test-utils";
 
-export const defaultActivityHandler = rest.get(
+export const defaultActivityHandler = http.get(baseUrl("/activities"), () => {
+  return HttpResponse.json({
+    activities: [
+      createMockActivity(),
+      createMockActivity({ id: 2, actor_full_name: "Test User 2" }),
+      createMockActivity({ id: 3, actor_full_name: "Test User 3" }),
+    ],
+    meta: {
+      has_next_results: false,
+      has_previous_results: false,
+    },
+  });
+});
+
+export const activityHandlerHasMoreActivities = http.get(
   baseUrl("/activities"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        activities: [
-          createMockActivity(),
-          createMockActivity({ id: 2, actor_full_name: "Test User 2" }),
-          createMockActivity({ id: 3, actor_full_name: "Test User 3" }),
-        ],
-        meta: {
-          has_next_results: false,
-          has_previous_results: false,
-        },
-      })
-    );
+  () => {
+    return HttpResponse.json({
+      activities: [
+        createMockActivity(),
+        createMockActivity({ id: 2 }),
+        createMockActivity({ id: 3 }),
+      ],
+      meta: {
+        has_next_results: true,
+        has_previous_results: false,
+      },
+    });
   }
 );
 
-export const activityHandlerHasMoreActivities = rest.get(
+export const activityHandlerHasPreviousActivities = http.get(
   baseUrl("/activities"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        activities: [
-          createMockActivity(),
-          createMockActivity({ id: 2 }),
-          createMockActivity({ id: 3 }),
-        ],
-        meta: {
-          has_next_results: true,
-          has_previous_results: false,
-        },
-      })
-    );
-  }
-);
-
-export const activityHandlerHasPreviousActivities = rest.get(
-  baseUrl("/activities"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        activities: [
-          createMockActivity(),
-          createMockActivity({ id: 2 }),
-          createMockActivity({ id: 3 }),
-        ],
-        meta: {
-          has_next_results: false,
-          has_previous_results: true,
-        },
-      })
-    );
+  () => {
+    return HttpResponse.json({
+      activities: [
+        createMockActivity(),
+        createMockActivity({ id: 2 }),
+        createMockActivity({ id: 3 }),
+      ],
+      meta: {
+        has_next_results: false,
+        has_previous_results: true,
+      },
+    });
   }
 );

frontend/test/handlers/apple_mdm.ts

@@ -1,18 +1,13 @@
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import { createMockVppInfo } from "__mocks__/appleMdm";
 import { baseUrl } from "test/test-utils";
 
-export const defaultVppInfoHandler = rest.get(
-  baseUrl("/vpp"),
-  (req, res, context) => {
-    return res(context.json(createMockVppInfo()));
-  }
-);
+// eslint-disable-next-line import/prefer-default-export
+export const defaultVppInfoHandler = http.get(baseUrl("/vpp"), () => {
+  return HttpResponse.json(createMockVppInfo());
+});
 
-export const errorNoVppInfoHandler = rest.get(
-  baseUrl("/vpp"),
-  (req, res, context) => {
-    return res(context.status(404));
-  }
-);
+export const errorNoVppInfoHandler = http.get(baseUrl("/vpp"), () => {
+  return new HttpResponse("Not found", { status: 404 });
+});

frontend/test/handlers/device-handler.ts

@@ -1,4 +1,4 @@
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import createMockDeviceUser, {
   createMockDeviceSoftwareResponse,
@@ -10,67 +10,56 @@ import { baseUrl } from "test/test-utils";
 import { IDeviceUserResponse } from "interfaces/host";
 import { IGetDeviceSoftwareResponse } from "services/entities/device_user";
 
-export const defaultDeviceHandler = rest.get(
-  baseUrl("/device/:token"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        host: createMockHost(),
-        license: createMockLicense(),
-        org_logo_url: "",
-        global_config: {
-          mdm: { enabled_and_configured: false },
-        },
-      })
-    );
-  }
-);
+export const defaultDeviceHandler = http.get(baseUrl("/device/:token"), () => {
+  return HttpResponse.json({
+    host: createMockHost(),
+    license: createMockLicense(),
+    org_logo_url: "",
+    global_config: {
+      mdm: { enabled_and_configured: false },
+    },
+  });
+});
 
 export const customDeviceHandler = (overrides: Partial<IDeviceUserResponse>) =>
-  rest.get(baseUrl("/device/:token"), (req, res, context) => {
-    return res(
-      context.json(
-        Object.assign(
-          {
-            host: createMockHost(),
-            license: createMockLicense(),
-            org_logo_url: "",
-            global_config: {
-              mdm: { enabled_and_configured: false },
-            },
+  http.get(baseUrl("/device/:token"), () => {
+    return HttpResponse.json(
+      Object.assign(
+        {
+          host: createMockHost(),
+          license: createMockLicense(),
+          org_logo_url: "",
+          global_config: {
+            mdm: { enabled_and_configured: false },
           },
-          overrides
-        )
+        },
+        overrides
       )
     );
   });
 
-export const defaultDeviceMappingHandler = rest.get(
+export const defaultDeviceMappingHandler = http.get(
   baseUrl("/device/:token/device_mapping"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        device_mapping: [createMockDeviceUser()],
-        host_id: 1,
-      })
-    );
+  () => {
+    return HttpResponse.json({
+      device_mapping: [createMockDeviceUser()],
+      host_id: 1,
+    });
   }
 );
 
-export const defaultMacAdminsHandler = rest.get(
+export const defaultMacAdminsHandler = http.get(
   baseUrl("/device/:token/macadmins"),
-  (req, res, context) => {
-    return res(
-      context.json({
-        macadmins: createMockMacAdmins(),
-      })
-    );
+  () => {
+    return HttpResponse.json({
+      macadmins: createMockMacAdmins(),
+    });
   }
 );
 
 export const customDeviceSoftwareHandler = (
   overrides?: Partial<IGetDeviceSoftwareResponse>
 ) =>
-  rest.get(baseUrl("/device/:token/software"), (req, res, context) => {
-    return res(context.json(createMockDeviceSoftwareResponse(overrides)));
+  http.get(baseUrl("/device/:token/software"), () => {
+    return HttpResponse.json(createMockDeviceSoftwareResponse(overrides));
   });

frontend/test/handlers/label-handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import { baseUrl } from "test/test-utils";
 import { createMockLabel } from "__mocks__/labelsMock";
@@ -6,10 +6,8 @@ import { ILabel } from "interfaces/label";
 
 // eslint-disable-next-line import/prefer-default-export
 export const getLabelHandler = (overrides: Partial<ILabel>) =>
-  rest.get(baseUrl("/labels/:id"), (req, res, context) => {
-    return res(
-      context.json({
-        label: createMockLabel({ ...overrides }),
-      })
-    );
+  http.get(baseUrl("/labels/:id"), () => {
+    return HttpResponse.json({
+      label: createMockLabel({ ...overrides }),
+    });
   });

frontend/test/handlers/setup-experience-handlers.ts

@@ -1,20 +1,20 @@
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import { baseUrl } from "test/test-utils";
 import { createMockSetupExperienceScript } from "__mocks__/setupExperienceMock";
 
 const setupExperienceScriptUrl = baseUrl("/setup_experience/script");
 
-export const defaultSetupExperienceScriptHandler = rest.get(
+export const defaultSetupExperienceScriptHandler = http.get(
   setupExperienceScriptUrl,
-  (req, res, context) => {
-    return res(context.json(createMockSetupExperienceScript()));
+  () => {
+    return HttpResponse.json(createMockSetupExperienceScript());
   }
 );
 
-export const errorNoSetupExperienceScript = rest.get(
+export const errorNoSetupExperienceScript = http.get(
   setupExperienceScriptUrl,
-  (req, res, context) => {
-    return res(context.status(404));
+  () => {
+    return new HttpResponse("Not found", { status: 404 });
   }
 );

frontend/test/jest.config.ts

@@ -29,7 +29,7 @@ const esModules = [
 const config: Config = {
   rootDir: "../../",
   moduleDirectories: ["node_modules", "frontend"],
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-fixed-jsdom",
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/frontend/__mocks__/fileMock.js",
@@ -45,9 +45,13 @@ const config: Config = {
   clearMocks: true,
   testEnvironmentOptions: {
     url: "http://localhost:8080",
+    customExportConditions: [""],
   },
   // transformIgnorePatterns: ["node_modules/(?!react-markdown/)"],
   transformIgnorePatterns: [`/node_modules/(?!(${esModules})/)`],
+  globals: {
+    TransformStream,
+  },
 };
 
 export default config;

frontend/test/test-setup.ts

@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom";
-
 import mockServer from "./mock-server";
 
 // Needed for testing react-tooltip-5

package.json

@@ -151,11 +151,11 @@
     "ignore-styles": "5.0.1",
     "jest": "29.2.0",
     "jest-environment-jsdom": "29.2.0",
-    "jest-environment-jsdom-sixteen": "1.0.3",
+    "jest-fixed-jsdom": "0.0.8",
     "jsdom": "16.7.0",
     "json-loader": "0.5.7",
     "mini-css-extract-plugin": "2.7.5",
-    "msw": "0.47.4",
+    "msw": "2.5.1",
     "node-bourbon": "4.2.8",
     "node-sass-glob-importer": "5.3.3",
     "postcss-loader": "4.3.0",
@@ -169,7 +169,7 @@
     "ts-node": "10.7.0",
     "tslint": "5.10.0",
     "tslint-react": "3.6.0",
-    "typescript": "4.6.2",
+    "typescript": "4.7",
     "webpack": "5.78.0",
     "webpack-cli": "5.0.1",
     "webpack-notifier": "1.12.0"
@@ -184,4 +184,4 @@
     "defaults"
   ],
   "license": "SEE LICENSE IN ./LICENSE"
-}
+}