MAINT: Upgrade frontend to react-router 8.3.0

.github/workflows/frontend_tests.yml

@@ -19,7 +19,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: "20"
+  NODE_VERSION: "22"
   PYTHON_VERSION: "3.11"
 
 jobs:

doc/getting_started/install_local_dev.md

@@ -40,7 +40,7 @@ Set up a PyRIT development environment on your local machine.
     git clone https://github.com/microsoft/PyRIT
     ```
 
-4. **Node.js and npm**. Required for building the TypeScript/React frontend. Download [Node.js](https://nodejs.org/) (which includes npm). Version 18 or higher is recommended.
+4. **Node.js and npm**. Required for building the TypeScript/React frontend. Download [Node.js](https://nodejs.org/) (which includes npm). Version 22 or higher is required (the frontend's `react-router` dependency requires Node >= 22.22.0).
 
 ### Installation
 

frontend/jest-esm-js-transformer.cjs

@@ -0,0 +1,31 @@
+/**
+ * Jest transformer for the ESM-only JavaScript dependencies that have to be
+ * down-compiled to CommonJS (see `transformIgnorePatterns` in jest.config.ts).
+ *
+ * ts-jest only runs `astTransformers` over TypeScript sources, so those
+ * packages keep their `import.meta` references and fail to parse once emitted
+ * as CommonJS — react-router's `import.meta.hot` guard is one such case.
+ * Neutralize `import.meta` in the source before delegating to ts-jest.
+ */
+const tsJest = require('ts-jest')
+
+const createTsJestTransformer = (tsJest.default ?? tsJest).createTransformer
+
+const neutralizeImportMeta = (source) =>
+  source.replace(/\bimport\.meta\.env\b/g, 'process.env').replace(/\bimport\.meta\b/g, '({})')
+
+module.exports = {
+  createTransformer(config) {
+    const transformer = createTsJestTransformer(config)
+
+    for (const method of ['process', 'processAsync', 'getCacheKey', 'getCacheKeyAsync']) {
+      const original = transformer[method]
+      if (typeof original !== 'function') continue
+      const bound = original.bind(transformer)
+      transformer[method] = (source, path, options) =>
+        bound(neutralizeImportMeta(source), path, options)
+    }
+
+    return transformer
+  },
+}

frontend/jest-import-meta-transformer.ts

@@ -2,6 +2,11 @@
  * ts-jest AST transformer that replaces `import.meta.env.X` with
  * `process.env.X` so that ts-jest (CommonJS mode) can parse files
  * using Vite's `import.meta.env` convention.
+ *
+ * Scope: TypeScript sources only. ts-jest never runs `astTransformers` over
+ * .js files, so node_modules dependencies are handled by
+ * jest-esm-js-transformer.cjs instead — extending this file does not reach
+ * them.
  */
 import ts from 'typescript'
 

frontend/jest.config.ts

@@ -1,5 +1,13 @@
 import type { Config } from "jest";
 
+const tsJestOptions = {
+  tsconfig: "tsconfig.test.json",
+  useESM: false,
+  astTransformers: {
+    before: [{ path: "./jest-import-meta-transformer.ts" }],
+  },
+};
+
 const config: Config = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
@@ -27,26 +35,27 @@ const config: Config = {
     },
   },
   transform: {
-    // Also transform .js/.jsx so ts-jest can down-compile the ESM-only
-    // react-markdown dependency chain (whitelisted below) to CommonJS.
-    "^.+\\.[tj]sx?$": [
-      "ts-jest",
-      {
-        tsconfig: "tsconfig.test.json",
-        useESM: false,
-        astTransformers: {
-          before: [{ path: "./jest-import-meta-transformer.ts" }],
-        },
-      },
-    ],
+    // Two entries on purpose — do NOT collapse them back into a single
+    // `^.+\.[tj]sx?$` pattern. ts-jest runs `astTransformers` over TypeScript
+    // sources only, so `jest-import-meta-transformer.ts` never sees the .js in
+    // node_modules and any `import.meta` there survives into the CommonJS
+    // output, where it is a syntax error. Every ESM-only dependency added to
+    // the allowlist below depends on the wrapper to neutralize it first
+    // (react-router's `import.meta.hot` guard is the current example).
+    "^.+\\.tsx?$": ["ts-jest", tsJestOptions],
+    // Also transform JavaScript so ts-jest can down-compile the ESM-only
+    // react-markdown and react-router dependency chains to CommonJS. The
+    // `[cm]?` covers .mjs/.cjs dist files such as cookie-es/dist/index.mjs.
+    "^.+\\.[cm]?jsx?$": ["<rootDir>/jest-esm-js-transformer.cjs", tsJestOptions],
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   testPathIgnorePatterns: ["/node_modules/", "/dist/", "/e2e/"],
   // By default Jest never transforms node_modules. react-markdown and its
-  // remark/micromark/unified/mdast/hast/unist dependencies are ESM-only, so
-  // they must be transformed. Everything else in node_modules stays ignored.
+  // remark/micromark/unified/mdast/hast/unist dependencies are ESM-only, as are
+  // react-router and its cookie-es dependency, so they must be transformed.
+  // Everything else in node_modules stays ignored.
   transformIgnorePatterns: [
-    "/node_modules/(?!(@fluentui|axios|react-markdown|remark-.*|rehype-.*|micromark.*|mdast-.*|hast-.*|unist-.*|unified|bail|trough|vfile.*|is-plain-obj|trim-lines|property-information|comma-separated-tokens|space-separated-tokens|decode-named-character-reference|character-entities.*|html-url-attributes|devlop|zwitch|longest-streak|markdown-table|ccount|escape-string-regexp|estree-util-.*|hastscript|web-namespaces|stringify-entities|inline-style-parser|style-to-object)/)",
+    "/node_modules/(?!(@fluentui|axios|react-markdown|react-router|cookie-es|remark-.*|rehype-.*|micromark.*|mdast-.*|hast-.*|unist-.*|unified|bail|trough|vfile.*|is-plain-obj|trim-lines|property-information|comma-separated-tokens|space-separated-tokens|decode-named-character-reference|character-entities.*|html-url-attributes|devlop|zwitch|longest-streak|markdown-table|ccount|escape-string-regexp|estree-util-.*|hastscript|web-namespaces|stringify-entities|inline-style-parser|style-to-object)/)",
   ],
   globals: {},
 };

frontend/package.json

@@ -32,7 +32,7 @@
     "react-error-boundary": "6.1.2",
     "react-joyride": "^3.2.0",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "7.18.1",
+    "react-router": "8.3.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {

frontend/src/App.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import App from "./App";
 import { ThemeProvider } from "./hooks/useTheme";
 

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
-import { Routes, Route, Navigate, useNavigate, useLocation, useSearchParams, matchPath } from 'react-router-dom'
+import { Routes, Route, Navigate, useNavigate, useLocation, useSearchParams, matchPath } from 'react-router'
 import { useMsal } from '@azure/msal-react'
 import { Joyride } from 'react-joyride'
 import { useTheme } from './hooks/useTheme'

frontend/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 import App from './App'
 import { AuthProvider } from './auth/AuthProvider'
 import { ThemeProvider } from './hooks/useTheme'

frontend/src/setupTests.ts

@@ -6,7 +6,7 @@ import { TextEncoder, TextDecoder } from "util";
 // dialogs (tabster modalizer + Textarea) can take longer to mount under load.
 configure({ asyncUtilTimeout: 5000 });
 
-// jsdom omits TextEncoder/TextDecoder, which react-router v7 references at
+// jsdom omits TextEncoder/TextDecoder, which react-router references at
 // import time. Node's util provides spec-compatible implementations.
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder as typeof global.TextDecoder;