chore: Upgrade msw to 2.7.0 (and Node.js to 22.13.1) in /ui (#4995)

peruukki · web-flow · commit a8842b04924d · 2025-02-03T14:10:48.000-05:00
The main purpose was to upgrade msw from 0.36.8 to 2.7.0, to get rid of
the security alerts of the old version. The upgrade turned out to be
quite difficult, and in the end I only got the tests to pass with this
combination of other dependencies:

- test running environment: @happy-dom/jest-environment

    - jsdom (the default) or jest-fixed-jsdom (suggested in many places
      around the internet) neither worked due to various different
      errors.

- Node.js version: 22

    - I don't have an explanation, but with Node 20 the tests often fail
      to navigate to other pages, without visible errors, though
      sometimes the tests do pass. I saw the same failing behavior in
      other running environments than @happy-dom/jest-environment
      too, but in those there were also some visible errors. With Node
      22, the tests seem to run notably faster, which might be related.

    - Version 22 has been in long-term support for quite a while now, so
      it's good to move to it anyway.

Signed-off-by: Harri Lehtola &lt;peruukki@hotmail.com&gt;
diff --git a/ui/.nvmrc b/ui/.nvmrc
@@ -1 +1 @@
-v20.18.0
+v22.13.1
diff --git a/ui/jest.config.js b/ui/jest.config.js
@@ -9,7 +9,13 @@ module.exports = {
     "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
     "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
   ],
-  testEnvironment: "jsdom",
+  // Couldn't get tests working with msw 2 in jsdom or jest-fixed-jsdom,
+  // happy-dom finally worked with added globals
+  testEnvironment: "@happy-dom/jest-environment",
+  // https://mswjs.io/docs/migrations/1.x-to-2.x#cannot-find-module-mswnode-jsdom
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
   transform: {
     "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
diff --git a/ui/package.json b/ui/package.json
@@ -56,6 +56,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
+    "@happy-dom/jest-environment": "^16.7.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.2",
@@ -68,7 +69,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.0.1",
-    "@types/node": "^20.16.13",
+    "@types/node": "^22.12.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^27.4.2",
@@ -95,7 +96,7 @@
     "jest-resolve": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "mini-css-extract-plugin": "^2.4.5",
-    "msw": "^0.36.8",
+    "msw": "^2.7.0",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
diff --git a/ui/src/mocks/handlers.ts b/ui/src/mocks/handlers.ts
@@ -1,35 +1,25 @@
-import { rest } from "msw";
-import {readFileSync} from 'fs';
+import { http, HttpResponse } from "msw";
+import { readFileSync } from 'fs';
 import path from "path";
 
 const registry = readFileSync(path.resolve(__dirname, "../../public/registry.db"));
 
-const projectsListWithDefaultProject = rest.get(
-  "/projects-list.json",
-  (req, res, ctx) => {
-    return res(
-      ctx.status(200),
-      ctx.json({
-        default: "credit_score_project",
-        projects: [
-          {
-            name: "Credit Score Project",
-            description:
-              "Project for credit scoring team and associated models.",
-            id: "credit_score_project",
-            registryPath: "/registry.pb",
-          },
-        ],
-      })
-    );
-  }
+const projectsListWithDefaultProject = http.get("/projects-list.json", () =>
+  HttpResponse.json({
+    default: "credit_score_project",
+    projects: [
+      {
+        name: "Credit Score Project",
+        description: "Project for credit scoring team and associated models.",
+        id: "credit_score_project",
+        registryPath: "/registry.pb",
+      },
+    ],
+  })
 );
 
-const creditHistoryRegistry = rest.get("/registry.pb", (req, res, ctx) => {
-  return res(
-    ctx.status(200), 
-    ctx.set('Content-Type', 'application/octet-stream'),
-    ctx.body(registry));
-});
+const creditHistoryRegistry = http.get("/registry.pb", () =>
+  HttpResponse.arrayBuffer(registry.buffer)
+);
 
 export { projectsListWithDefaultProject, creditHistoryRegistry };
diff --git a/ui/src/setupTests.ts b/ui/src/setupTests.ts
@@ -3,3 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { BroadcastChannel } from 'worker_threads';
+
+// BroadcastChannel is missing from @happy-dom/jest-environment globals
+Object.assign(global, { BroadcastChannel });
diff --git a/ui/yarn.lock b/ui/yarn.lock
