Fix builder test

packages/builder/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
+  plugins: ["@babel/plugin-transform-modules-commonjs"],
+};

packages/builder/craco.config.js

@@ -16,27 +16,6 @@ const esmModules = [
 ];
 
 module.exports = {
-  jest: {
-    configure: () => ({
-      preset: "ts-jest/presets/js-with-ts",
-      testEnvironment: "jsdom",
-      clearMocks: true,
-      resetMocks: true,
-      coverageProvider: "v8",
-      verbose: true,
-      // @rainbow-me/rainbowkit is already an ESM module and
-      // it trips Jest when it tries to transform it, this ignores it
-      transformIgnorePatterns: [
-        `/node_modules/.pnpm/(?!(${esmModules.join("|")}))`,
-      ],
-      moduleNameMapper: {
-        "\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$":
-          require.resolve("jest-transform-stub"),
-      },
-      setupFilesAfterEnv: ["./src/setupTests.ts"],
-      testPathIgnorePatterns: ["/e2e/"],
-    }),
-  },
   webpack: {
     plugins: {
       add: [new VerifyEnvPlugin()],

packages/builder/package.json

@@ -2,7 +2,7 @@
   "name": "builder",
   "version": "0.1.0",
   "private": true,
-    "engines": {
+  "engines": {
     "npm": ">=8.5.5",
     "node": ">=20.1.0"
   },
@@ -62,7 +62,6 @@
     "gitcoin-lit-js-sdk": "^1.3.1",
     "history": "^5.3.0",
     "https-browserify": "^1.0.0",
-    "jest": "^27.0",
     "jszip": "^3.10.1",
     "localforage": "^1.10.0",
     "os-browserify": "^0.3.0",
@@ -133,11 +132,16 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@types/dompurify": "^2.4.0",
     "@types/jest-when": "^3.5.2",
     "@types/react-gtm-module": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^5.23.0",
+    "babel-jest": "^29.7.0",
     "dotenv": "^16.4.1",
     "eslint": ">=8.1.0 <9.0.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -149,6 +153,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "hardhat-deploy": "^0.11.4",
+    "jest": "^27.5.1",
     "jest-environment-jsdom": "^27.0",
     "jest-transform-stub": "^2.0.0",
     "jest-when": "^3.5.1",
@@ -161,5 +166,10 @@
     "@typescript-eslint/eslint-plugin": "6.7.0",
     "@typescript-eslint/parser": "5.23.0",
     "typescript": "5.1.6"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "/builder/node_modules/(?!(@spruceid|wagmi|@wagmi))/"
+    ]
   }
 }

packages/builder/src/__tests__/components/grants/Show.test.tsx

@@ -10,11 +10,15 @@ import {
 import Project from "../../../components/grants/Show";
 import { projectOwnersLoaded } from "../../../actions/projects";
 
+// Mock the addressFrom function to prevent out-of-scope variable access errors in jest.mock
+// Jest.mock does not allow referencing variables that are declared outside the factory function scope.
+// By defining a mock function within the test file, we ensure that the necessary function is within scope.
+const mockAddressFrom = jest.fn((chainId: number) => addressFrom(chainId));
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
     chainId: 1,
-    registryAddress: addressFrom(1),
+    registryAddress: mockAddressFrom(1),
     id: 1,
   }),
 }));

packages/builder/src/components/grants/rounds/__tests__/Rounds.test.tsx

@@ -12,13 +12,18 @@ import {
 } from "../../../../utils/test_utils";
 import Rounds from "../Rounds";
 
+// Mock the addressFrom function to prevent out-of-scope variable access errors in jest.mock
+// Jest.mock does not allow referencing variables that are declared outside the factory function scope.
+// By defining a mock function within the test file, we ensure that the necessary function is within scope.
+const mockAddressFrom = jest.fn((chainId: number) => addressFrom(chainId));
+
 // the params are needed to create the unique project id, etc..
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
     chainId: "5",
     id: "2",
-    registryAddress: addressFrom(123),
+    registryAddress: mockAddressFrom(123),
   }),
 }));