feat: migrate from Jest to Vitest

Migrate test runner from Jest to Vitest for significantly improved performance:
- Frontend tests: 77.9s → 2.1s (37x faster)
- API tests: 84.4s → 7.6s (11x faster)

Changes:
- Add vitest.frontend.config.ts and vitest.api.config.ts
- Use node environment by default, jsdom only for DOM-requiring tests
- Convert jest.mock/fn/spyOn to vi.mock/fn/spyOn across 17 test files
- Add setup.vitest.ts with TextEncoder polyfill
- Inline @across-protocol/* packages to resolve ESM issues
- Update package.json test scripts to use vitest

Co-Authored-By: Claude <noreply@anthropic.com>

Author: jorgen

package.json

@@ -75,14 +75,14 @@
     "remote-env": "tsx ./scripts/fetch-remote-env.ts",
     "cache-swap-tokens": "tsx scripts/cache-swap-tokens.ts",
     "analyze": "yarn build && rollup-plugin-visualizer --open ./bundle-size-analysis.json",
-    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && jest --config jest.frontend.config.cjs",
+    "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vitest run --config vitest.frontend.config.ts",
     "serve": "vite preview --port 3000",
-    "test-api": "yarn remote-config && jest --config jest.api.config.cjs ./test/api",
+    "test-api": "yarn remote-config && vitest run --config vitest.api.config.ts --dir ./test/api",
     "pretest:e2e": "npm pkg set 'type'='module'",
     "test:e2e:headful": "yarn pretest:e2e && playwright test",
     "test:e2e:headless": "yarn pretest:e2e && HEADLESS=true playwright test",
     "test:e2e:headless:ui": "yarn pretest:e2e && HEADLESS=true playwright test --ui",
-    "test:e2e-api": "export NODE_OPTIONS='--max-old-space-size=8192' && yarn remote-config && jest --config jest.api.config.cjs ./e2e-api",
+    "test:e2e-api": "export NODE_OPTIONS='--max-old-space-size=8192' && yarn remote-config && vitest run --config vitest.api.config.ts --dir ./e2e-api",
     "eject": "react-scripts eject",
     "format": "prettier --check src api e2e test",
     "format:fix": "prettier --write src api e2e test",
@@ -164,6 +164,8 @@
     "@types/react-router-dom": "5.3.3",
     "@vercel/node": "^5.0.2",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^4.0.15",
+    "@vitest/ui": "^4.0.15",
     "axios-mock-adapter": "^1.21.2",
     "buffer": "^6.0.3",
     "canvas": "^3.1.2",
@@ -175,6 +177,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.6.15",
+    "happy-dom": "^20.0.11",
     "husky": "^8.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -195,7 +198,8 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^4.0.15"
   },
   "babel": {
     "env": {

setup.vitest.ts

@@ -0,0 +1,5 @@
+import { TextEncoder, TextDecoder } from "util";
+
+global.TextEncoder = TextEncoder;
+// @ts-expect-error - The types are incompatible but the implementation works correctly
+global.TextDecoder = TextDecoder;

src/hooks/tests/usePrevious.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { renderHook } from "@testing-library/react";
 import { usePrevious } from "../usePrevious";
 const setUp = () =>

src/hooks/tests/useScrollPosition.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { renderHook } from "@testing-library/react";
 import useScrollPosition from "../useScrollPosition";
 

src/hooks/tests/useWindowSize.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { renderHook, act } from "@testing-library/react";
 import useWindowSize from "../useWindowSize";
 

src/utils/tests/rewards.test.ts

@@ -1,11 +1,10 @@
 import { BigNumber } from "ethers";
 import { parseEtherLike } from "utils/format";
+import { vi } from "vitest";
 
 import { getBaseRewardsApr } from "../rewards";
 
-// Enums break ts-jest
-// https://github.com/kulshekhar/ts-jest/issues/3397
-jest.mock("../providers.ts", () => ({
+vi.mock("../providers.ts", () => ({
   ChainId: {
     MAINNET: 1,
   },

test/api/_bridges/bridges-utils.test.ts

@@ -1,3 +1,4 @@
+import { vi } from "vitest";
 import { BigNumber } from "ethers";
 import { CHAIN_IDs, TOKEN_SYMBOLS_MAP } from "../../../api/_constants";
 import {
@@ -9,15 +10,18 @@ import { LimitsResponse } from "../../../api/_types";
 import { getCachedLimits } from "../../../api/_utils";
 import { getTransferMode } from "../../../api/_bridges/cctp/utils/fill-times";
 
-jest.mock("../../../api/_utils", () => ({
-  ...jest.requireActual("../../../api/_utils"),
-  getCachedLimits: jest.fn(),
+vi.mock("../../../api/_utils", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getCachedLimits: vi.fn(),
 }));
 
-jest.mock("../../../api/_bridges/cctp/utils/fill-times", () => ({
-  ...jest.requireActual("../../../api/_bridges/cctp/utils/fill-times"),
-  getTransferMode: jest.fn(),
-}));
+vi.mock(
+  "../../../api/_bridges/cctp/utils/fill-times",
+  async (importOriginal) => ({
+    ...(await importOriginal()),
+    getTransferMode: vi.fn(),
+  })
+);
 
 // Helper function to create a token on a specific chain
 const createToken = (
@@ -86,8 +90,10 @@ describe("#getBridgeStrategyData()", () => {
 
   beforeEach(() => {
     // Reset and setup mock before each test
-    (getCachedLimits as jest.Mock).mockReset();
-    (getCachedLimits as jest.Mock).mockResolvedValue(mockLimitsResponse());
+    (getCachedLimits as ReturnType<typeof vi.fn>).mockReset();
+    (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(
+      mockLimitsResponse()
+    );
   });
 
   describe("Utilization checks", () => {
@@ -218,7 +224,7 @@ describe("#getBridgeStrategyData()", () => {
         const limits = mockLimitsResponse({
           maxDepositInstant: "100000000", // 100 USDC
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -235,7 +241,7 @@ describe("#getBridgeStrategyData()", () => {
         const limits = mockLimitsResponse({
           maxDepositInstant: "100000000", // 100 USDC
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -257,7 +263,7 @@ describe("#getBridgeStrategyData()", () => {
             utilizedReserves: "500000000000", // 83.3% utilization
           },
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -277,7 +283,7 @@ describe("#getBridgeStrategyData()", () => {
             utilizedReserves: "100000000000", // 33.3% utilization
           },
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -385,13 +391,15 @@ describe("#getBridgeStrategyData()", () => {
       describe("Linea fast mode eligibility", () => {
         beforeEach(() => {
           // Reset getTransferMode mock before each test
-          (getTransferMode as jest.Mock).mockReset();
+          (getTransferMode as ReturnType<typeof vi.fn>).mockReset();
         });
 
         test("should mark Linea as Fast CCTP eligible when fast mode is available", async () => {
           const amount = BigNumber.from("15000000000"); // 15,000 USDC
           // Mock getTransferMode to return "fast" mode
-          (getTransferMode as jest.Mock).mockResolvedValue("fast");
+          (getTransferMode as ReturnType<typeof vi.fn>).mockResolvedValue(
+            "fast"
+          );
 
           const result = await getBridgeStrategyData({
             ...baseParams,
@@ -412,7 +420,9 @@ describe("#getBridgeStrategyData()", () => {
         test("should not mark Linea as Fast CCTP eligible when fast mode is unavailable", async () => {
           const amount = BigNumber.from("15000000000"); // 15,000 USDC
           // Mock getTransferMode to return "standard" mode (fast mode not available)
-          (getTransferMode as jest.Mock).mockResolvedValue("standard");
+          (getTransferMode as ReturnType<typeof vi.fn>).mockResolvedValue(
+            "standard"
+          );
 
           const result = await getBridgeStrategyData({
             ...baseParams,
@@ -484,7 +494,7 @@ describe("#getBridgeStrategyData()", () => {
         const limits = mockLimitsResponse({
           maxDepositInstant: "1000000", // Should match converted amount
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -516,7 +526,7 @@ describe("#getBridgeStrategyData()", () => {
     describe("Error handling", () => {
       test("should return undefined when getCachedLimits throws error", async () => {
         const amount = BigNumber.from("1000000");
-        (getCachedLimits as jest.Mock).mockRejectedValue(
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockRejectedValue(
           new Error("API error")
         );