Skip to content

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

Merged
stalniy merged 1 commit intomainfrom
fix/jest-major
Nov 10, 2025
Merged

fix: updates jest in deploy-web to 30.x#2179
stalniy merged 1 commit intomainfrom
fix/jest-major

Conversation

@stalniy
Copy link
Contributor

@stalniy stalniy commented Nov 10, 2025

Why

To use newer version of jsdom which contains newer browser API (e.g., AbortSignal.any)

Summary by CodeRabbit

  • Chores

    • Updated Jest testing framework and jest-environment-jsdom from v29.7.0 to v30.2.0
  • Refactor

    • Improved internal dependency injection patterns
    • Enhanced test infrastructure for better maintainability

@stalniy stalniy requested a review from a team as a code owner November 10, 2025 09:57
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 10, 2025

Walkthrough

The PR upgrades Jest dependencies (29.x to 30.x), refactors Jest configuration typing, and introduces window.location and window.history as injectable services. OnboardingContainer is updated to consume these services instead of directly accessing window objects, eliminating the need for global state cleanup in tests.

Changes

Cohort / File(s) Summary
Jest Configuration
apps/deploy-web/jest.config.ts
Relaxes explicit type annotation on Jest config; adds type assertion to ts-jest transformer entry and applies satisfies Config.InitialProjectOptions to align object structure.
Dependency Upgrade
apps/deploy-web/package.json
Bumps jest and jest-environment-jsdom from ^29.7.0 to ^30.2.0 in devDependencies.
Dependency Injection
apps/deploy-web/src/services/app-di-container/browser-di-container.ts
Adds windowLocation and windowHistory as injectable service providers; adds trailing comma to deploymentLocalStorage declaration.
Component Integration
apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx
Extracts windowLocation and windowHistory from useServices; replaces direct window.location and window.history access with injected services.
Test Refactoring
apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
Removes cleanup function and global window object restoration; replaces direct window tampering with isolated windowLocation and windowHistory mock variables passed via dependencies.

Sequence Diagram

sequenceDiagram
    participant Test
    participant DI as DI Container
    participant Component
    participant MockServices as Mocked Services

    Note over Test,MockServices: Before: Direct window mutation + cleanup
    Test->>Component: Pass setup dependencies
    Component->>window: Access window.location/history directly
    Test->>Test: Cleanup (restore window state)

    Note over Test,MockServices: After: Injected services, no cleanup needed
    Test->>MockServices: Create windowLocation & windowHistory mocks
    Test->>DI: Provide mocked services
    DI->>Component: Inject windowLocation & windowHistory
    Component->>MockServices: Access location/history via services
    Test->>Test: No cleanup required
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Jest config changes require verification that type assertions align with tsconfig and project structure
  • Dependency upgrade from Jest 29.x to 30.x may have behavioral changes; verify test runner compatibility and any breaking changes
  • DI container additions are straightforward, but verify all consumers of useServices properly unpack the new properties
  • Test refactoring removes cleanup logic; ensure mock state isolation between tests is maintained without explicit cleanup

Possibly related PRs

  • #1760: Modifies jest.config.ts and ts-jest transformer configuration with similar typing patterns
  • #1767: Updates DI container exports and imports in browser-di-container, directly overlapping with service injection changes

Suggested reviewers

  • ygrishajev
  • baktun14

Poem

🐰 No more window tangled in global state,
Services injected keep tests clean and straight,
Jest upgraded with satisfies grace,
Dependencies flow through their rightful place,
Mock location travels without cleanup's weight! 🎯

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the primary change: updating Jest from 29.x to 30.x in the deploy-web package, which is reflected in the package.json modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/jest-major

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd46e86 and 9873431.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (5)
  • apps/deploy-web/jest.config.ts (1 hunks)
  • apps/deploy-web/package.json (1 hunks)
  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx (4 hunks)
  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx (4 hunks)
  • apps/deploy-web/src/services/app-di-container/browser-di-container.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.spec.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/no-jest-mock.mdc)

Don't use jest.mock() to mock dependencies in test files. Instead, use jest-mock-extended to create mocks and pass mocks as dependencies to the service under test.

**/*.spec.{ts,tsx}: Use setup function instead of beforeEach in test files
setup function must be at the bottom of the root describe block in test files
setup function creates an object under test and returns it
setup function should accept a single parameter with inline type definition
Don't use shared state in setup function
Don't specify return type of setup function

Files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
apps/{deploy-web,provider-console}/**/*.spec.tsx

📄 CodeRabbit inference engine (.cursor/rules/query-by-in-tests.mdc)

Use queryBy methods instead of getBy methods in test expectations in .spec.tsx files

Files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/general.mdc)

Never use type any or cast to type any. Always define the proper TypeScript types.

Files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
  • apps/deploy-web/jest.config.ts
  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx
  • apps/deploy-web/src/services/app-di-container/browser-di-container.ts
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/general.mdc)

**/*.{js,ts,tsx}: Never use deprecated methods from libraries.
Don't add unnecessary comments to the code

Files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
  • apps/deploy-web/jest.config.ts
  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx
  • apps/deploy-web/src/services/app-di-container/browser-di-container.ts
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/no-jest-mock.mdc:0-0
Timestamp: 2025-07-21T08:24:24.269Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't use `jest.mock()` to mock dependencies in test files. Instead, use `jest-mock-extended` to create mocks and pass mocks as dependencies to the service under test.
📚 Learning: 2025-07-21T08:25:07.474Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't use shared state in `setup` function

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
📚 Learning: 2025-07-21T08:25:07.474Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Use `setup` function instead of `beforeEach` in test files

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
📚 Learning: 2025-07-21T08:24:27.953Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/query-by-in-tests.mdc:0-0
Timestamp: 2025-07-21T08:24:27.953Z
Learning: Applies to apps/{deploy-web,provider-console}/**/*.spec.tsx : Use `queryBy` methods instead of `getBy` methods in test expectations in `.spec.tsx` files

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
📚 Learning: 2025-07-21T08:25:07.474Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : `setup` function creates an object under test and returns it

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
📚 Learning: 2025-07-21T08:25:07.474Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't specify return type of `setup` function

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
  • apps/deploy-web/jest.config.ts
📚 Learning: 2025-07-21T08:25:07.474Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : `setup` function should accept a single parameter with inline type definition

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
  • apps/deploy-web/jest.config.ts
📚 Learning: 2025-07-21T08:24:24.269Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/no-jest-mock.mdc:0-0
Timestamp: 2025-07-21T08:24:24.269Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't use `jest.mock()` to mock dependencies in test files. Instead, use `jest-mock-extended` to create mocks and pass mocks as dependencies to the service under test.

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
  • apps/deploy-web/jest.config.ts
  • apps/deploy-web/package.json
📚 Learning: 2025-07-11T10:46:43.711Z
Learnt from: stalniy
Repo: akash-network/console PR: 1660
File: apps/deploy-web/src/components/alerts/DeploymentAlertsContainer/DeploymentAlertsContainer.spec.tsx:54-56
Timestamp: 2025-07-11T10:46:43.711Z
Learning: In apps/{deploy-web,provider-console}/**/*.spec.tsx files: Use `getBy` methods instead of `queryBy` methods when testing element presence with `toBeInTheDocument()` because `getBy` throws an error and shows DOM state when element is not found, providing better debugging information than `queryBy` which returns null.

Applied to files:

  • apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx
📚 Learning: 2025-07-27T12:16:08.566Z
Learnt from: CR
Repo: akash-network/console PR: 0
File: .cursor/rules/general.mdc:0-0
Timestamp: 2025-07-27T12:16:08.566Z
Learning: Applies to **/*.{js,ts,tsx} : Don't add unnecessary comments to the code

Applied to files:

  • apps/deploy-web/jest.config.ts
🧬 Code graph analysis (1)
apps/deploy-web/src/services/app-di-container/browser-di-container.ts (1)
apps/deploy-web/src/services/deployment-storage/deployment-storage.service.ts (1)
  • DeploymentStorageService (5-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
  • GitHub Check: validate (apps/stats-web) / validate-unsafe
  • GitHub Check: validate (apps/deploy-web) / validate-unsafe
  • GitHub Check: validate / validate-app
  • GitHub Check: test-build
  • GitHub Check: test-build
  • GitHub Check: validate / validate-app
  • GitHub Check: test-build
  • GitHub Check: test-build
  • GitHub Check: validate / validate-app
  • GitHub Check: validate / validate-app
  • GitHub Check: test-build
  • GitHub Check: validate / validate-app
  • GitHub Check: test-build
  • GitHub Check: validate / validate-app
  • GitHub Check: test-build
🔇 Additional comments (5)
apps/deploy-web/package.json (1)

169-170: LGTM! Jest 30.x upgrade enables newer browser APIs.

The upgrade to Jest 30.2.0 and jest-environment-jsdom 30.2.0 aligns perfectly with the PR objectives to support newer browser APIs like AbortSignal.any through an updated jsdom version.

apps/deploy-web/jest.config.ts (1)

9-17: LGTM! Type refinements align with Jest 30.x.

The typing changes properly accommodate Jest 30.x's type system. The use of satisfies Config.InitialProjectOptions provides type safety while preserving type inference, and the explicit Config.TransformerConfig assertion ensures the ts-jest configuration is properly typed.

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

58-60: LGTM! Window services enhance testability.

Exposing windowLocation and windowHistory as injectable services is an excellent pattern that enables proper dependency injection and eliminates the need for global window mutations in tests. This approach aligns with the existing service architecture and improves test isolation.

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

140-149: LGTM! Clean refactoring to dependency-injected window mocks.

The test suite effectively eliminates global window mutations by injecting windowLocation and windowHistory through the dependencies object. The setup properly spreads the original window objects to preserve all properties while allowing test-specific overrides. This approach significantly improves test isolation and follows the established dependency injection pattern.

Also applies to: 169-170, 182-200, 237-240

apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.tsx (1)

70-71: LGTM! Consistent adoption of injectable window services.

The component cleanly replaces all direct window.location and window.history access with the injectable windowLocation and windowHistory services. This refactoring maintains identical functionality while significantly improving testability by enabling proper dependency injection in tests.

Also applies to: 93-93, 104-104, 106-106, 167-167


Comment @coderabbitai help to get the list of available commands and usage tips.

@socket-security
Copy link

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedjest-environment-jsdom@​30.2.01001006291100
Addedjest@​30.2.01001006992100
Addedsemver@​7.7.310010010088100

View full report

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 } =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non-blocking: perhaps it makes more sense to just use window so that we wouldn't need to add every window prop in the future?

Suggested change
const { analyticsService, urlService, authService, chainApiHttpClient, deploymentLocalStorage, appConfig, errorHandler, windowLocation, windowHistory } =
const { analyticsService, urlService, authService, chainApiHttpClient, deploymentLocalStorage, appConfig, errorHandler, windowLocation, window } =

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from another hand, it will be harder to mock the whole window in tests. Though possible with mockDeep<Window>(). Honestly, I think this is a rare case, for example localStorage we need to encapsulate separately.

but the main reason behind this change is that I just needed to fix it for new jsdom version which doesn't allow to redefine location and history on window. Ideally we should use router for both cases, not sure whether react router exposes this information

@codecov
Copy link

codecov bot commented Nov 10, 2025

Codecov Report

❌ Patch coverage is 75.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.71%. Comparing base (cd46e86) to head (9873431).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
.../services/app-di-container/browser-di-container.ts 33.33% 2 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2179   +/-   ##
=======================================
  Coverage   46.70%   46.71%           
=======================================
  Files        1019     1019           
  Lines       28929    28931    +2     
  Branches     7515     7516    +1     
=======================================
+ Hits        13512    13515    +3     
+ Misses      15103    15026   -77     
- Partials      314      390   +76     
Flag Coverage Δ
api 81.85% <ø> (+0.02%) ⬆️
deploy-web 25.26% <75.00%> (+<0.01%) ⬆️
log-collector 75.35% <ø> (ø)
notifications 88.11% <ø> (ø)
provider-console 81.48% <ø> (ø)
provider-proxy 85.28% <ø> (ø)
Files with missing lines Coverage Δ
...arding/OnboardingContainer/OnboardingContainer.tsx 79.52% <100.00%> (ø)
.../services/app-di-container/browser-di-container.ts 71.42% <33.33%> (-4.33%) ⬇️

... and 57 files with indirect coverage changes

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@stalniy stalniy merged commit 0e607dd into main Nov 10, 2025
64 checks passed
@stalniy stalniy deleted the fix/jest-major branch November 10, 2025 12:20
stalniy added a commit that referenced this pull request Nov 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments