feat: migrate from Jest to Vitest

e2e-api/swap/fetch-approval.test.ts

@@ -322,7 +322,6 @@ describe("GET /swap/approval", () => {
   });
 
   describe("Wrapped Tokens", () => {
-    jest.setTimeout(JEST_TIMEOUT_MS);
     const tokensToTest = [
       "WETH",
       "WBNB",
@@ -368,7 +367,6 @@ describe("GET /swap/approval", () => {
   });
 
   describe("Ambiguous Tokens", () => {
-    jest.setTimeout(JEST_TIMEOUT_MS);
     const tokensToTest = ["USDC", "USDT"];
 
     for (const tokenSymbol of tokensToTest) {
@@ -404,7 +402,6 @@ describe("GET /swap/approval", () => {
   });
 
   describe("'slippage' query parameter", () => {
-    jest.setTimeout(JEST_TIMEOUT_MS);
     const baseParams = {
       amount: ethers.utils.parseUnits("10", 6).toString(), // 10 USDC
       inputToken: TOKEN_SYMBOLS_MAP.USDC.addresses[CHAIN_IDs.ARBITRUM],

package.json

@@ -76,14 +76,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",
@@ -155,7 +155,6 @@
     "@synthetixio/synpress": "^4.0.0-alpha.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
-    "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.5",
     "@types/luxon": "^3.3.0",
     "@types/node": "^12.0.0",
@@ -165,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",
@@ -176,17 +177,14 @@
     "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",
-    "jest-transform-stub": "^2.0.0",
     "lint-staged": "^13.0.3",
     "patch-package": "^7.0.0",
     "prettier": "^3.4.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^7.5.3",
     "tevm": "^1.0.0-next.147",
-    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.15.6",
     "typescript-eslint": "^7.13.1",
@@ -196,7 +194,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.jest.ts → setup.vitest.ts

@@ -1,4 +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 happy-dom
 import { renderHook } from "@testing-library/react";
 import { usePrevious } from "../usePrevious";
 const setUp = () =>

src/hooks/tests/useScrollPosition.test.ts

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

src/hooks/tests/useWindowSize.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 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 { parseEtherLike } from "../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, describe, test, expect, beforeEach, it } from "vitest";
 import { BigNumber } from "ethers";
 import { CHAIN_IDs, TOKEN_SYMBOLS_MAP } from "../../../api/_constants";
 import {
@@ -9,15 +10,18 @@
 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 = (
@@ -87,8 +91,10 @@
 
   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", () => {
@@ -219,7 +225,7 @@
         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,
@@ -236,7 +242,7 @@
         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,
@@ -258,7 +264,7 @@
             utilizedReserves: "500000000000", // 83.3% utilization
           },
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -278,7 +284,7 @@
             utilizedReserves: "100000000000", // 33.3% utilization
           },
         });
-        (getCachedLimits as jest.Mock).mockResolvedValue(limits);
+        (getCachedLimits as ReturnType<typeof vi.fn>).mockResolvedValue(limits);
 
         const result = await getBridgeStrategyData({
           ...baseParams,
@@ -386,13 +392,15 @@
       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,
@@ -413,7 +421,9 @@
         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,
@@ -485,7 +495,7 @@
         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,
@@ -517,7 +527,7 @@
     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")
         );