chore: migrate some tests from jest to vitest (coder#20568)

Author: aslilac

site/.knip.jsonc

@@ -8,5 +8,8 @@
 		"@types/react-virtualized-auto-sizer",
 		"jest_workaround",
 		"ts-proto"
-	]
+	],
+	"jest": {
+		"entry": "./src/**/*.jest.{ts,tsx}"
+	}
 }

site/jest.config.ts

@@ -31,7 +31,7 @@ module.exports = {
 			testEnvironmentOptions: {
 				customExportConditions: [""],
 			},
-			testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+			testRegex: "(/__tests__/.*|(\\.|/)(jest))\\.tsx?$",
 			testPathIgnorePatterns: [
 				"/node_modules/",
 				"/e2e/",

site/package.json

@@ -27,10 +27,10 @@
 		"storybook": "STORYBOOK=true storybook dev -p 6006",
 		"storybook:build": "storybook build",
 		"storybook:ci": "storybook build --test",
-		"test": "jest",
-		"test:ci": "jest --selectProjects test --silent",
-		"test:coverage": "jest --selectProjects test --collectCoverage",
-		"test:watch": "jest --selectProjects test --watch",
+		"test": "vitest run && jest",
+		"test:ci": "vitest run && jest --silent",
+		"test:watch": "vitest",
+		"test:watch-jest": "jest --watch",
 		"stats": "STATS=true pnpm build && npx http-server ./stats -p 8081 -c-1",
 		"update-emojis": "cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis"
 	},
@@ -133,7 +133,7 @@
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.16",
-		"@testing-library/jest-dom": "6.6.3",
+		"@testing-library/jest-dom": "6.9.1",
 		"@testing-library/react": "14.3.1",
 		"@testing-library/user-event": "14.6.1",
 		"@types/chroma-js": "2.4.0",
@@ -167,6 +167,7 @@
 		"jest-location-mock": "2.0.0",
 		"jest-websocket-mock": "2.5.0",
 		"jest_workaround": "0.1.14",
+		"jsdom": "27.0.1",
 		"knip": "5.64.1",
 		"msw": "2.4.8",
 		"postcss": "8.5.6",
@@ -180,7 +181,8 @@
 		"ts-proto": "1.181.2",
 		"typescript": "5.6.3",
 		"vite": "7.1.11",
-		"vite-plugin-checker": "0.11.0"
+		"vite-plugin-checker": "0.11.0",
+		"vitest": "4.0.5"
 	},
 	"browserslist": [
 		"chrome 110",

site/pnpm-lock.yaml

@@ -2759,7 +2759,7 @@ function getConfiguredAxiosInstance(): AxiosInstance {
 		}
 	} else {
 		// Do not write error logs if we are in a FE unit test.
-		if (process.env.JEST_WORKER_ID === undefined) {
+		if (!process.env.JEST_WORKER_ID && !process.env.VITEST) {
 			console.error("CSRF token not found");
 		}
 	}

site/src/api/api.test.ts site/src/api/api.jest.tssite/src/api/api.test.ts renamed to site/src/api/api.jest.ts

@@ -5,7 +5,7 @@ import { ConfirmDialog } from "./ConfirmDialog";
 describe("ConfirmDialog", () => {
 	it("onClose is called when cancelled", () => {
 		// Given
-		const onCloseMock = jest.fn();
+		const onCloseMock = vi.fn();
 		const props = {
 			cancelText: "CANCEL",
 			hideCancel: false,
@@ -24,8 +24,8 @@ describe("ConfirmDialog", () => {
 
 	it("onConfirm is called when confirmed", () => {
 		// Given
-		const onCloseMock = jest.fn();
-		const onConfirmMock = jest.fn();
+		const onCloseMock = vi.fn();
+		const onConfirmMock = vi.fn();
 		const props = {
 			cancelText: "CANCEL",
 			confirmText: "CONFIRM",

site/src/api/api.ts

@@ -23,8 +23,8 @@ describe("DeleteDialog", () => {
 		renderComponent(
 			<DeleteDialog
 				isOpen
-				onConfirm={jest.fn()}
-				onCancel={jest.fn()}
+				onConfirm={vi.fn()}
+				onCancel={vi.fn()}
 				entity="template"
 				name="MyTemplate"
 			/>,
@@ -38,8 +38,8 @@ describe("DeleteDialog", () => {
 		renderComponent(
 			<DeleteDialog
 				isOpen
-				onConfirm={jest.fn()}
-				onCancel={jest.fn()}
+				onConfirm={vi.fn()}
+				onCancel={vi.fn()}
 				entity="template"
 				name="MyTemplate"
 			/>,
@@ -56,8 +56,8 @@ describe("DeleteDialog", () => {
 		renderComponent(
 			<DeleteDialog
 				isOpen
-				onConfirm={jest.fn()}
-				onCancel={jest.fn()}
+				onConfirm={vi.fn()}
+				onCancel={vi.fn()}
 				entity="template"
 				name="MyTemplate"
 			/>,

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, screen } from "@testing-library/react";
 import { FileUpload } from "./FileUpload";
 
 test("accepts files with the correct extension", async () => {
-	const onUpload = jest.fn();
+	const onUpload = vi.fn();
 
 	renderComponent(
 		<FileUpload
@@ -21,14 +21,14 @@ test("accepts files with the correct extension", async () => {
 	fireEvent.drop(dropZone, {
 		dataTransfer: { files: [tarFile] },
 	});
-	expect(onUpload).toBeCalledWith(tarFile);
+	expect(onUpload).toHaveBeenCalledWith(tarFile);
 	onUpload.mockClear();
 
 	const zipFile = new File([""], "file.zip");
 	fireEvent.drop(dropZone, {
 		dataTransfer: { files: [zipFile] },
 	});
-	expect(onUpload).toBeCalledWith(zipFile);
+	expect(onUpload).toHaveBeenCalledWith(zipFile);
 	onUpload.mockClear();
 
 	const unsupportedFile = new File([""], "file.mp4");

site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import {
 	displayError,
 	displaySuccess,
@@ -48,7 +49,7 @@ describe("Snackbar", () => {
 
 	describe("displaySuccess", () => {
 		const originalWindowDispatchEvent = window.dispatchEvent;
-		type TDispatchEventMock = jest.MockedFunction<
+		type TDispatchEventMock = Mock<
 			(msg: CustomEvent<NotificationMsg>) => boolean
 		>;
 		let dispatchEventMock: TDispatchEventMock;
@@ -67,7 +68,7 @@ describe("Snackbar", () => {
 		};
 
 		beforeEach(() => {
-			dispatchEventMock = jest.fn();
+			dispatchEventMock = vi.fn();
 			window.dispatchEvent =
 				dispatchEventMock as unknown as typeof window.dispatchEvent;
 		});
@@ -114,16 +115,18 @@ describe("Snackbar", () => {
 	});
 
 	describe("displayError", () => {
-		it("shows the title and the message", (done) => {
+		it("shows the title and the message", () => {
 			const message = "Some error happened";
 
-			window.addEventListener(SnackbarEventType, (event) => {
-				const notificationEvent = event as CustomEvent<NotificationMsg>;
-				expect(notificationEvent.detail.msg).toEqual(message);
-				done();
-			});
+			return new Promise<void>((resolve) => {
+				window.addEventListener(SnackbarEventType, (event) => {
+					const notificationEvent = event as CustomEvent<NotificationMsg>;
+					expect(notificationEvent.detail.msg).toEqual(message);
+					resolve();
+				});
 
-			displayError(message);
+				displayError(message);
+			});
 		});
 	});
 });