Migrate @comet/admin tests to Vitest (#4972)

johnnyomair · web-flow · commit 47944a7a0754 · 2025-12-22T11:15:15.000+01:00
diff --git a/knip.json b/knip.json
@@ -35,7 +35,7 @@
         },
         "packages/admin/admin": {
             "project": ["./src/**/*.{ts,tsx}"],
-            "ignoreDependencies": ["jest-junit", "@mui/x-data-grid-pro", "@mui/x-date-pickers-pro", "msw"],
+            "ignoreDependencies": ["@mui/x-data-grid-pro", "@mui/x-date-pickers-pro", "msw", "jsdom"],
             "ignore": [".storybook/middleware.js"]
         },
         "packages/admin/admin-color-picker": {
diff --git a/packages/admin/admin/jest.config.ts b/packages/admin/admin/jest.config.ts
diff --git a/packages/admin/admin/package.json b/packages/admin/admin/package.json
@@ -29,8 +29,8 @@
         "start:babel": "pnpm exec babel ./src -x \".ts,.tsx\" -d lib -w",
         "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput",
         "storybook": "storybook dev -p 26646 --no-open",
-        "test": "jest",
-        "test:watch": "jest --watch"
+        "test": "vitest --run",
+        "test:watch": "vitest --watch"
     },
     "dependencies": {
         "@comet/admin-icons": "workspace:*",
@@ -73,7 +73,6 @@
         "@types/file-saver": "^2.0.7",
         "@types/final-form-set-field-data": "^1.0.3",
         "@types/history": "^4.7.11",
-        "@types/jest": "^29.5.14",
         "@types/lodash.debounce": "^4.0.9",
         "@types/lodash.isequal": "^4.5.8",
         "@types/node": "^24.9.1",
@@ -86,9 +85,6 @@
         "final-form": "^4.20.10",
         "graphql": "^16.0.0",
         "history": "^4.10.1",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "jest-junit": "^16.0.0",
         "msw": "^2.10.4",
         "npm-run-all2": "^8.0.0",
         "prettier": "^3.6.2",
@@ -102,8 +98,9 @@
         "rimraf": "^6.1.2",
         "storybook": "^9.1.10",
         "storybook-addon-tag-badges": "^2.0.1",
-        "ts-jest": "^29.4.0",
-        "typescript": "5.9.3"
+        "typescript": "5.9.3",
+        "vite-tsconfig-paths": "^6.0.3",
+        "vitest": "^4.0.16"
     },
     "peerDependencies": {
         "@apollo/client": "^3.7.0",
diff --git a/packages/admin/admin/setupTests.ts b/packages/admin/admin/setupTests.ts
diff --git a/packages/admin/admin/src/EditDialog.routerTabs.test.tsx b/packages/admin/admin/src/EditDialog.routerTabs.test.tsx
@@ -5,7 +5,8 @@ import { createMemoryHistory } from "history";
 import { type ReactNode, type RefObject, useRef } from "react";
 import { useIntl } from "react-intl";
 import { Router } from "react-router";
-import { render, screen, waitFor } from "test-utils";
+import { cleanup, render, screen, waitFor } from "test-utils";
+import { afterEach, describe, expect, it } from "vitest";
 
 import { Button } from "./common/buttons/Button";
 import { FillSpace } from "./common/FillSpace";
@@ -124,6 +125,8 @@ describe("EditDialog with Stack, Router Tabs and Grid", () => {
         );
     }
 
+    afterEach(cleanup);
+
     it("should not open edit dialog when navigating to the products page", async () => {
         const history = createMemoryHistory({
             initialEntries: ["/", "/products"],
diff --git a/packages/admin/admin/src/EditDialog.stackRouterTabs.test.tsx b/packages/admin/admin/src/EditDialog.stackRouterTabs.test.tsx
@@ -6,6 +6,7 @@ import { type ReactNode, type RefObject, useRef } from "react";
 import { useIntl } from "react-intl";
 import { Router } from "react-router";
 import { render, screen, waitFor, within } from "test-utils";
+import { describe, expect, it } from "vitest";
 
 import { Button } from "./common/buttons/Button";
 import { FillSpace } from "./common/FillSpace";
diff --git a/packages/admin/admin/src/EditDialog.test.tsx b/packages/admin/admin/src/EditDialog.test.tsx
@@ -1,5 +1,6 @@
 import userEvent from "@testing-library/user-event";
-import { render, screen, waitFor } from "test-utils";
+import { cleanup, render, screen, waitFor } from "test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import { Button } from "./common/buttons/Button";
 import { useEditDialog } from "./EditDialog";
@@ -9,9 +10,11 @@ import { FinalFormInput } from "./form/FinalFormInput";
 
 describe("EditDialog", () => {
     describe("onAfterSave", () => {
+        afterEach(cleanup);
+
         test("Should call onAfterSave when clicking save button", async () => {
             const user = userEvent.setup();
-            const onAfterSave = jest.fn();
+            const onAfterSave = vi.fn();
 
             function Story() {
                 const [EditDialog, , editDialogApi] = useEditDialog();
@@ -51,7 +54,7 @@ describe("EditDialog", () => {
 
         test("Should call onAfterSave when pressing Enter", async () => {
             const user = userEvent.setup();
-            const onAfterSave = jest.fn();
+            const onAfterSave = vi.fn();
 
             function Story() {
                 const [EditDialog, , editDialogApi] = useEditDialog();
diff --git a/packages/admin/admin/src/FinalForm.InTabs.test.tsx b/packages/admin/admin/src/FinalForm.InTabs.test.tsx
@@ -1,6 +1,7 @@
 import { createTheme } from "@mui/material/styles";
 import { IntlProvider } from "react-intl";
-import { fireEvent, render, waitFor } from "test-utils";
+import { cleanup, fireEvent, render, waitFor } from "test-utils";
+import { afterEach, expect, test } from "vitest";
 
 import { FinalForm } from "./FinalForm";
 import { Field } from "./form/Field";
@@ -14,6 +15,8 @@ import { StackLink } from "./stack/StackLink";
 import { StackSwitch } from "./stack/Switch";
 import { RouterTab, RouterTabs } from "./tabs/RouterTabs";
 
+afterEach(cleanup);
+
 test("Form DirtyPrompt for inner Tabs", async () => {
     function Story() {
         return (
diff --git a/packages/admin/admin/src/apollo/filterByFragment.test.ts b/packages/admin/admin/src/apollo/filterByFragment.test.ts
@@ -1,12 +1,12 @@
 // Copied and adapted from https://github.com/apollographql/apollo-client/blob/release-2.x/packages/graphql-anywhere/src/__tests__/utilities.ts
-
 import { disableFragmentWarnings, gql } from "@apollo/client";
+import { describe, expect, it } from "vitest";
+
+import { filterByFragment } from "./filterByFragment";
 
 // Turn off warnings for repeated fragment names
 disableFragmentWarnings();
 
-import { filterByFragment } from "./filterByFragment";
-
 describe("filterByFragment", () => {
     describe("with a single query", () => {
         const doc = gql`
diff --git a/packages/admin/admin/src/dataGrid/muiGridFilterToGql.test.ts b/packages/admin/admin/src/dataGrid/muiGridFilterToGql.test.ts
@@ -1,5 +1,6 @@
 import { GridLogicOperator } from "@mui/x-data-grid";
 import { type GridFilterModel } from "@mui/x-data-grid/models/gridFilterModel";
+import { describe, expect, it } from "vitest";
 
 import { type GridColDef } from "./GridColDef";
 import { muiGridFilterToGql } from "./muiGridFilterToGql";
diff --git a/packages/admin/admin/src/dataGrid/useDataGridRemote.test.tsx b/packages/admin/admin/src/dataGrid/useDataGridRemote.test.tsx
@@ -5,6 +5,7 @@ import { createMemoryHistory } from "history";
 import queryString from "query-string";
 import { Router } from "react-router";
 import { act, renderHook } from "test-utils";
+import { describe, expect, it } from "vitest";
 
 import { useDataGridRemote } from "./useDataGridRemote";
 
diff --git a/packages/admin/admin/src/form/helpers/OnChangeField.test.tsx b/packages/admin/admin/src/form/helpers/OnChangeField.test.tsx
@@ -2,6 +2,7 @@
 import { Fragment } from "react";
 import { Field, Form } from "react-final-form";
 import { cleanup, fireEvent, render } from "test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { OnChangeField } from "./OnChangeField";
 
@@ -13,7 +14,7 @@ describe("OnChangeField", () => {
     afterEach(cleanup);
 
     it("should not call listener on first render", () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         render(
             <Form onSubmit={onSubmitMock} initialValues={{ foo: "bar" }}>
                 {() => <OnChangeField name="foo">{spy}</OnChangeField>}
@@ -23,7 +24,7 @@ describe("OnChangeField", () => {
     });
 
     it("should call listener when going from uninitialized to value", () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const { getByTestId } = render(
             <Form onSubmit={onSubmitMock}>
                 {() => (
@@ -42,7 +43,7 @@ describe("OnChangeField", () => {
     });
 
     it("should call listener when going from initialized to value", () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const { getByTestId } = render(
             <Form onSubmit={onSubmitMock} initialValues={{ name: "erik" }}>
                 {() => (
@@ -61,7 +62,7 @@ describe("OnChangeField", () => {
     });
 
     it("should call listener when changing to null", () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
         const { getByTestId } = render(
             <Form onSubmit={onSubmitMock} initialValues={{ name: "erikras" }}>
                 {() => (
diff --git a/packages/admin/admin/src/router/PromptHandler.test.tsx b/packages/admin/admin/src/router/PromptHandler.test.tsx
@@ -1,11 +1,14 @@
 import { Redirect, Route, Switch } from "react-router";
 import { Link } from "react-router-dom";
-import { fireEvent, render, waitFor } from "test-utils";
+import { cleanup, fireEvent, render, waitFor } from "test-utils";
+import { afterEach, expect, test } from "vitest";
 
 import { ForcePromptRoute } from "./ForcePromptRoute";
 import { RouterPrompt } from "./Prompt";
 import { useSubRoutePrefix } from "./SubRoute";
 
+afterEach(cleanup);
+
 test("Nested route in Prompt", async () => {
     function Story() {
         return (
diff --git a/packages/admin/admin/src/router/SubRoute.test.tsx b/packages/admin/admin/src/router/SubRoute.test.tsx
@@ -3,11 +3,14 @@ import { createMemoryHistory } from "history";
 import { IntlProvider } from "react-intl";
 import { Route, Router, Switch, useRouteMatch } from "react-router";
 import { Link } from "react-router-dom";
-import { fireEvent, render, waitFor } from "test-utils";
+import { cleanup, fireEvent, render, waitFor } from "test-utils";
+import { afterEach, expect, test } from "vitest";
 
 import { MuiThemeProvider } from "../mui/ThemeProvider";
 import { SubRoute, SubRouteIndexRoute, useSubRoutePrefix } from "../router/SubRoute";
 
+afterEach(cleanup);
+
 test("Subrote other route hidden", async () => {
     function Cmp1() {
         const urlPrefix = useSubRoutePrefix();
diff --git a/packages/admin/admin/src/stack/Stack.multiple.test.tsx b/packages/admin/admin/src/stack/Stack.multiple.test.tsx
@@ -3,6 +3,7 @@ import { createMemoryHistory } from "history";
 import { IntlProvider } from "react-intl";
 import { Router } from "react-router";
 import { fireEvent, render, waitFor } from "test-utils";
+import { expect, test } from "vitest";
 
 import { MuiThemeProvider } from "../mui/ThemeProvider";
 import { SubRoute, useSubRoutePrefix } from "../router/SubRoute";
diff --git a/packages/admin/admin/src/stack/Stack.nested.test.tsx b/packages/admin/admin/src/stack/Stack.nested.test.tsx
@@ -4,6 +4,7 @@ import { useContext } from "react";
 import { IntlProvider } from "react-intl";
 import { Router } from "react-router";
 import { fireEvent, render, waitFor } from "test-utils";
+import { expect, test } from "vitest";
 
 import { MuiThemeProvider } from "../mui/ThemeProvider";
 import { StackBreadcrumbs } from "./breadcrumbs/StackBreadcrumbs";
diff --git a/packages/admin/admin/src/tabs/RouterTabs.test.tsx b/packages/admin/admin/src/tabs/RouterTabs.test.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { IntlProvider } from "react-intl";
 import { Router, useRouteMatch } from "react-router";
 import { fireEvent, render } from "test-utils";
+import { expect, test } from "vitest";
 
 import { MuiThemeProvider } from "../mui/ThemeProvider";
 import { SubRoute, useSubRoutePrefix } from "../router/SubRoute";
diff --git a/packages/admin/admin/tsconfig.test.json b/packages/admin/admin/tsconfig.test.json
diff --git a/packages/admin/admin/vitest.config.ts b/packages/admin/admin/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+    plugins: [tsconfigPaths()],
+    test: {
+        environment: "jsdom",
+        reporters: ["default", "junit"],
+        setupFiles: "./vitest.setup.ts",
+    },
+});
diff --git a/packages/admin/admin/vitest.setup.ts b/packages/admin/admin/vitest.setup.ts
@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+
+const ResizeObserverMock = vi.fn(
+    class {
+        observe = vi.fn();
+        unobserve = vi.fn();
+        disconnect = vi.fn();
+    },
+);
+
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
