chore(frontend): isolate MAJOR dependency bumps from #11869 (#11887)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/__tests__/components/modals/microagents/microagent-modal.test.tsx

@@ -57,7 +57,7 @@ describe("MicroagentsModal - Refresh Button", () => {
   });
 
   afterEach(() => {
-    vi.clearAllMocks();
+    vi.restoreAllMocks();
   });
 
   describe("Refresh Button Rendering", () => {
@@ -74,13 +74,15 @@ describe("MicroagentsModal - Refresh Button", () => {
   describe("Refresh Button Functionality", () => {
     it("should call refetch when refresh button is clicked", async () => {
       const user = userEvent.setup();
+      const refreshSpy = vi.spyOn(ConversationService, "getMicroagents");
 
       renderWithProviders(<MicroagentsModal {...defaultProps} />);
 
-      const refreshSpy = vi.spyOn(ConversationService, "getMicroagents");
-
       // Wait for the component to load and render the refresh button
       const refreshButton = await screen.findByTestId("refresh-microagents");
+
+      refreshSpy.mockClear();
+
       await user.click(refreshButton);
 
       expect(refreshSpy).toHaveBeenCalledTimes(1);

frontend/__tests__/hooks/use-terminal.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { beforeAll, describe, expect, it, vi, afterEach } from "vitest";
 import { useTerminal } from "#/hooks/use-terminal";
 import { Command, useCommandStore } from "#/state/command-store";
@@ -45,17 +46,29 @@ describe("useTerminal", () => {
   }));
 
   beforeAll(() => {
-    // mock ResizeObserver
-    window.ResizeObserver = vi.fn().mockImplementation(() => ({
-      observe: vi.fn(),
-      unobserve: vi.fn(),
-      disconnect: vi.fn(),
-    }));
+    // mock ResizeObserver - use class for Vitest 4 constructor support
+    window.ResizeObserver = class {
+      observe = vi.fn();
 
-    // mock Terminal
+      unobserve = vi.fn();
+
+      disconnect = vi.fn();
+    } as unknown as typeof ResizeObserver;
+
+    // mock Terminal - use class for Vitest 4 constructor support
     vi.mock("@xterm/xterm", async (importOriginal) => ({
       ...(await importOriginal<typeof import("@xterm/xterm")>()),
-      Terminal: vi.fn().mockImplementation(() => mockTerminal),
+      Terminal: class {
+        loadAddon = mockTerminal.loadAddon;
+
+        open = mockTerminal.open;
+
+        write = mockTerminal.write;
+
+        writeln = mockTerminal.writeln;
+
+        dispose = mockTerminal.dispose;
+      },
     }));
   });
 

frontend/__tests__/routes/secrets-settings.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor, within } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import userEvent from "@testing-library/user-event";
 import { createRoutesStub, Outlet } from "react-router";
@@ -21,25 +21,25 @@ const MOCK_GET_SECRETS_RESPONSE: GetSecretsResponse["custom_secrets"] = [
   },
 ];
 
-const RouterStub = createRoutesStub([
-  {
-    Component: () => <Outlet />,
-    path: "/settings",
-    children: [
-      {
-        Component: SecretsSettingsScreen,
-        path: "/settings/secrets",
-      },
-      {
-        Component: () => <div data-testid="git-settings-screen" />,
-        path: "/settings/integrations",
-      },
-    ],
-  },
-]);
+const renderSecretsSettings = () => {
+  const RouterStub = createRoutesStub([
+    {
+      Component: () => <Outlet />,
+      path: "/settings",
+      children: [
+        {
+          Component: SecretsSettingsScreen,
+          path: "/settings/secrets",
+        },
+        {
+          Component: () => <div data-testid="git-settings-screen" />,
+          path: "/settings/integrations",
+        },
+      ],
+    },
+  ]);
 
-const renderSecretsSettings = () =>
-  render(<RouterStub initialEntries={["/settings/secrets"]} />, {
+  return render(<RouterStub initialEntries={["/settings/secrets"]} />, {
     wrapper: ({ children }) => (
       <QueryClientProvider
         client={
@@ -52,6 +52,7 @@ const renderSecretsSettings = () =>
       </QueryClientProvider>
     ),
   });
+};
 
 beforeEach(() => {
   const getConfigSpy = vi.spyOn(OptionService, "getConfig");
@@ -61,6 +62,10 @@ beforeEach(() => {
   });
 });
 
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
 describe("Content", () => {
   it("should render the secrets settings screen", () => {
     renderSecretsSettings();
@@ -501,6 +506,8 @@ describe("Secret actions", () => {
 
   it("should not submit whitespace secret names or values", async () => {
     const createSecretSpy = vi.spyOn(SecretsService, "createSecret");
+    const getSecretsSpy = vi.spyOn(SecretsService, "getSecrets");
+    getSecretsSpy.mockResolvedValue([]);
     renderSecretsSettings();
 
     // render form & hide items
@@ -532,9 +539,11 @@ describe("Secret actions", () => {
     await userEvent.click(submitButton);
 
     expect(createSecretSpy).not.toHaveBeenCalled();
-    expect(
-      screen.queryByText("SECRETS$SECRET_VALUE_REQUIRED"),
-    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.queryByText("SECRETS$SECRET_VALUE_REQUIRED"),
+      ).toBeInTheDocument();
+    });
   });
 
   it("should not reset ipout values on an invalid submit", async () => {

frontend/package.json

@@ -15,8 +15,8 @@
     "@react-router/node": "^7.9.6",
     "@react-router/serve": "^7.9.6",
     "@react-types/shared": "^3.32.0",
-    "@stripe/react-stripe-js": "^4.0.2",
-    "@stripe/stripe-js": "^7.9.0",
+    "@stripe/react-stripe-js": "^5.4.1",
+    "@stripe/stripe-js": "^8.5.3",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.90.11",
@@ -47,7 +47,7 @@
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-router": "^7.9.6",
-    "react-syntax-highlighter": "^15.6.6",
+    "react-syntax-highlighter": "^16.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "sirv-cli": "^3.0.1",
@@ -112,7 +112,7 @@
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitest/coverage-v8": "^4.0.14",
     "autoprefixer": "^10.4.22",
     "cross-env": "^10.1.0",
     "eslint": "^8.57.0",
@@ -131,12 +131,12 @@
     "lint-staged": "^16.2.7",
     "msw": "^2.6.6",
     "prettier": "^3.7.3",
-    "stripe": "^18.5.0",
+    "stripe": "^20.0.0",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.9.3",
     "vite-plugin-svgr": "^4.5.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.2"
+    "vitest": "^4.0.14"
   },
   "packageManager": "npm@10.5.0",
   "volta": {