fix: updates jest in deploy-web to 30.x (#2179)

Author: stalniy

apps/deploy-web/jest.config.ts

@@ -6,15 +6,15 @@ const createJestConfig = nextJest({
   dir: "./"
 });
 
-const common: Config.InitialOptions = {
+const common = {
   moduleNameMapper: {
     "^@src(.*)$": "<rootDir>/src/$1",
     "^@tests(.*)$": "<rootDir>/tests/$1"
   },
   transform: {
-    "\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.spec.json" }]
+    "\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.spec.json" }] as Config.TransformerConfig
   }
-};
+} satisfies Config.InitialProjectOptions;
 
 const styleMockPath = "<rootDir>/../../node_modules/next/dist/build/jest/__mocks__/styleMock.js";
 const getConfig = createJestConfig({

apps/deploy-web/package.json

@@ -166,8 +166,8 @@
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.3",
     "eslint-plugin-simple-import-sort": "^12.1.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-junit": "^16.0.0",
     "jest-mock-extended": "^4.0.0-beta1",
     "nock": "^13.5.0",

apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx

@@ -137,7 +137,7 @@ describe("OnboardingContainer", () => {
   });
 
   it("should handle fromSignup URL parameter", async () => {
-    const { child, mockAnalyticsService, cleanup } = setup({
+    const { child, mockAnalyticsService } = setup({
       windowLocation: {
         search: "?fromSignup=true",
         href: "http://localhost/onboarding?fromSignup=true",
@@ -159,9 +159,6 @@ describe("OnboardingContainer", () => {
 
     // The component should be on the EMAIL_VERIFICATION step after handling fromSignup
     expect(child.mock.calls[child.mock.calls.length - 1][0].currentStep).toBe(OnboardingStepIndex.EMAIL_VERIFICATION);
-
-    // Clean up window object modifications
-    cleanup();
   });
 
   function setup(
@@ -182,32 +179,24 @@ describe("OnboardingContainer", () => {
     });
 
     // Store original window objects
-    const originalLocation = window.location;
-    const originalHistory = window.history;
+    let windowLocation = window.location;
+    let windowHistory = window.history;
 
     // Mock window.location and history based on input
     if (input.windowLocation) {
-      Object.defineProperty(window, "location", {
-        value: { ...originalLocation, ...input.windowLocation },
-        writable: true
-      });
+      windowLocation = { ...windowLocation, ...input.windowLocation };
     } else if (!window.location.search) {
       // Set default values if window.location is not already mocked
-      Object.defineProperty(window, "location", {
-        value: {
-          href: "http://localhost/onboarding",
-          origin: "http://localhost",
-          search: ""
-        },
-        writable: true
-      });
+      windowLocation = {
+        ...windowLocation,
+        href: "http://localhost/onboarding",
+        origin: "http://localhost",
+        search: ""
+      };
     }
 
     if (input.windowHistory) {
-      Object.defineProperty(window, "history", {
-        value: { ...originalHistory, ...input.windowHistory },
-        writable: true
-      });
+      windowHistory = { ...windowHistory, ...input.windowHistory };
     }
 
     const mockAnalyticsService = mock<AnalyticsService>();
@@ -245,7 +234,9 @@ describe("OnboardingContainer", () => {
       authService,
       chainApiHttpClient: mockChainApiHttpClient,
       deploymentLocalStorage: mockDeploymentLocalStorage,
-      appConfig: mockAppConfig
+      appConfig: mockAppConfig,
+      windowLocation,
+      windowHistory
     });
     const mockUseRouter = jest.fn().mockReturnValue(mockRouter);
     const mockUseWallet = jest.fn().mockReturnValue({
@@ -334,18 +325,6 @@ describe("OnboardingContainer", () => {
 
     render(<OnboardingContainer dependencies={dependencies}>{mockChildren}</OnboardingContainer>);
 
-    // Return cleanup function to restore original window objects
-    const cleanup = () => {
-      Object.defineProperty(window, "location", {
-        value: originalLocation,
-        writable: true
-      });
-      Object.defineProperty(window, "history", {
-        value: originalHistory,
-        writable: true
-      });
-    };
-
     return {
       child: mockChildren,
       mockAnalyticsService,
@@ -366,8 +345,7 @@ describe("OnboardingContainer", () => {
       mockNewDeploymentData,
       mockValidateDeploymentData,
       mockAppendAuditorRequirement,
-      mockTransactionMessageData,
-      cleanup
+      mockTransactionMessageData
     };
   }
 });

apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx

@@ -67,7 +67,8 @@ export const OnboardingContainer: React.FunctionComponent<OnboardingContainerPro
   const router = d.useRouter();
   const { user } = d.useUser();
   const { data: paymentMethods = [] } = d.usePaymentMethodsQuery({ enabled: !!user?.stripeCustomerId });
-  const { analyticsService, urlService, authService, chainApiHttpClient, deploymentLocalStorage, appConfig, errorHandler } = d.useServices();
+  const { analyticsService, urlService, authService, chainApiHttpClient, deploymentLocalStorage, appConfig, errorHandler, windowLocation, windowHistory } =
+    d.useServices();
   const { hasManagedWallet, isWalletLoading, connectManagedWallet, address, signAndBroadcastTx } = d.useWallet();
   const { templates } = d.useTemplates();
   const { genNewCertificateIfLocalIsInvalid, updateSelectedCertificate } = d.useCertificate();
@@ -89,7 +90,7 @@ export const OnboardingContainer: React.FunctionComponent<OnboardingContainerPro
       }
     }
 
-    const urlParams = new URLSearchParams(window.location.search);
+    const urlParams = new URLSearchParams(windowLocation.search);
     const fromSignup = urlParams.get("fromSignup");
     if (fromSignup === "true") {
       analyticsService.track("onboarding_account_created", {
@@ -100,9 +101,9 @@ export const OnboardingContainer: React.FunctionComponent<OnboardingContainerPro
       setCurrentStep(OnboardingStepIndex.EMAIL_VERIFICATION);
       d.localStorage?.setItem(ONBOARDING_STEP_KEY, OnboardingStepIndex.EMAIL_VERIFICATION.toString());
 
-      const newUrl = new URL(window.location.href);
+      const newUrl = new URL(windowLocation.href);
       newUrl.searchParams.delete("fromSignup");
-      window.history.replaceState({}, "", newUrl.toString());
+      windowHistory.replaceState({}, "", newUrl.toString());
     }
   }, [analyticsService, d.localStorage]);
 
@@ -163,7 +164,7 @@ export const OnboardingContainer: React.FunctionComponent<OnboardingContainerPro
         handleStepChange(OnboardingStepIndex.EMAIL_VERIFICATION);
       }
     } else {
-      authService.signup({ returnTo: `${window.location.origin}${urlService.onboarding(true)}` });
+      authService.signup({ returnTo: `${windowLocation.origin}${urlService.onboarding(true)}` });
     }
   }, [analyticsService, handleStepComplete, urlService, user, handleStepChange, authService]);
 

apps/deploy-web/src/services/app-di-container/browser-di-container.ts

@@ -55,5 +55,7 @@ export const services = createChildContainer(rootContainer, {
   appConfig: () => browserEnvConfig,
   authService: () => new AuthService(services.urlService, services.internalApiHttpClient),
   storedWalletsService: () => walletUtils,
-  deploymentLocalStorage: () => new DeploymentStorageService(localStorage, services.networkStore)
+  deploymentLocalStorage: () => new DeploymentStorageService(localStorage, services.networkStore),
+  windowLocation: () => window.location,
+  windowHistory: () => window.history
 });