refactor: Switch to Vitest from Jest (#4955)

* refactor: Switch from jest to vitest

* test: Update all tests to use vi instead of jest

Author: cephalization

.tours/app.tour

@@ -38,7 +38,7 @@
     },
     {
       "file": "app/src/components/trace/__tests__/utils.test.ts",
-      "description": "The fontend also utilizes `jest` to run unit tests to make sure certain code paths are properly tested. All tests can be run via the `npm` command `npm run test` which runs all the tests that fall under `__tests__` directories with the postfix `.test.ts`.",
+      "description": "The fontend also utilizes `vitest` to run unit tests to make sure certain code paths are properly tested. All tests can be run via the `npm` command `npm run test` which runs all the tests that fall under `__tests__` directories with the postfix `.test.ts`.",
       "line": 4
     },
     {
@@ -57,4 +57,4 @@
       "line": 3
     }
   ]
-}
+}

app/README.md

@@ -36,7 +36,7 @@ The web build ensures that the UI as well as the data-fetching layer is fully ty
 
 ## Test
 
-The Phoenix app is statically analyzed for type safety via `typescript`, statically analyzed for best practices via [eslint](https://eslint.org/), and the formatting is enforced via the `prettier` code formatter. For unit testing, the app leverages [jest](https://jestjs.io/) as a unit testing framework. Lastly, for integration tests (e.g. end-to-end or e2e), [playwright](playwright.dev) is used. The following `pnpm` commands correspond to the above safeguards.
+The Phoenix app is statically analyzed for type safety via `typescript`, statically analyzed for best practices via [eslint](https://eslint.org/), and the formatting is enforced via the `prettier` code formatter. For unit testing, the app leverages [vitest](https://vitest.dev/) as a unit testing framework. Lastly, for integration tests (e.g. end-to-end or e2e), [playwright](playwright.dev) is used. The following `pnpm` commands correspond to the above safeguards.
 
 ```shell
 pnpm run typecheck

app/__tests__/authFetch.test.ts

@@ -1,18 +1,18 @@
 import { authFetch } from "@phoenix/authFetch";
-jest.mock("@phoenix/config");
+vi.mock("@phoenix/config");
 
 describe("authFetch", () => {
   const _fetch = global.fetch;
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   afterEach(() => {
     global.fetch = _fetch;
   });
   it("should call fetch with the provided input and init", async () => {
     // @ts-expect-error mock global fetch
-    global.fetch = jest.fn(() =>
+    global.fetch = vi.fn(() =>
       Promise.resolve({
         json: () => Promise.resolve({ data: "12345" }),
       })
@@ -31,7 +31,7 @@ describe("authFetch", () => {
   it("should try to refresh the tokens if it gets a 401", async () => {
     let count = 0;
     // @ts-expect-error mock global fetch
-    global.fetch = jest.fn(() => {
+    global.fetch = vi.fn(() => {
       count += 1;
       return Promise.resolve({
         status: count === 1 ? 401 : 200,

app/jest.config.js

@@ -54,7 +54,6 @@
     "@types/d3-format": "^3.0.4",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-time-format": "^4.0.3",
-    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.5.4",
     "@types/react": "18.3.10",
@@ -67,30 +66,28 @@
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
     "cpy-cli": "^5.0.0",
-    "esbuild-jest": "^0.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-42acc6a-20241001",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "graphql": "^16.9.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^25.0.1",
     "only-allow": "^1.2.1",
     "prettier": "^3.3.3",
     "relay-compiler": "^16.2.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "ts-jest": "^29.2.2",
     "typescript": "~5.4.5",
     "vite": "^5.3.6",
-    "vite-plugin-relay": "^2.1.0"
+    "vite-plugin-relay": "^2.1.0",
+    "vitest": "^2.1.2"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "build": "pnpm run build:relay && vite build",
     "build:static": "cpy ./static ../src/phoenix/server",
     "build:relay": "relay-compiler",
-    "test": "jest --config ./jest.config.js",
+    "test": "vitest run",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "dev": "pnpm run dev:server & pnpm run build:static && pnpm run build:relay && vite",