Migrate to vitest

.github/workflows/pr.yml

@@ -56,5 +56,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Restore Vitest cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.vite
+          key: vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('vitest.config.ts', 'vite.config.base.ts') }}
+          restore-keys: |
+            vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
+
       - name: Run component tests
         run: pnpm test

__mocks__/react-router-dom.tsx

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from 'react';
+import type { Mock } from 'vitest';
 
-export const navigateMock = jest.fn();
+export const navigateMock: Mock = vi.fn();
 
-export const useLocation = jest.fn();
-export const useRouteMatch = jest.fn();
-export const useNavigate = () => navigateMock;
-export const useParams = jest.fn();
+export const useLocation: Mock = vi.fn();
+export const useRouteMatch: Mock = vi.fn();
+export const useNavigate = (): Mock => navigateMock;
+export const useParams: Mock = vi.fn();
 export const withRouter = (children: React.ReactNode) => children;
 export const Route = ({
   path = 'index',

__mocks__/zustand.ts

@@ -1,14 +1,13 @@
 // __mocks__/zustand.ts
-import { act } from '@testing-library/react';
-import * as zustand from 'zustand';
+import type * as Zustand from 'zustand';
 
-const { create: actualCreate, createStore: actualCreateStore } =
-  jest.requireActual<typeof zustand>('zustand');
-
-// a variable to hold reset functions for all stores declared in the app
+// Holds reset functions for all stores created in the app
 export const storeResetFns = new Set<() => void>();
 
-const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+const createUncurried = <T>(
+  stateCreator: Zustand.StateCreator<T>,
+  actualCreate: typeof Zustand.create,
+) => {
   const store = actualCreate(stateCreator);
   const initialState = store.getInitialState();
   storeResetFns.add(() => {
@@ -17,15 +16,10 @@ const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
   return store;
 };
 
-// when creating a store, we get its initial state, create a reset function and add it in the set
-export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  // to support curried version of create
-  return typeof stateCreator === 'function'
-    ? createUncurried(stateCreator)
-    : createUncurried;
-}) as typeof zustand.create;
-
-const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+const createStoreUncurried = <T>(
+  stateCreator: Zustand.StateCreator<T>,
+  actualCreateStore: typeof Zustand.createStore,
+) => {
   const store = actualCreateStore(stateCreator);
   const initialState = store.getInitialState();
   storeResetFns.add(() => {
@@ -34,19 +28,20 @@ const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
   return store;
 };
 
-// when creating a store, we get its initial state, create a reset function and add it in the set
-export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  // to support curried version of createStore
-  return typeof stateCreator === 'function'
-    ? createStoreUncurried(stateCreator)
-    : createStoreUncurried;
-}) as typeof zustand.createStore;
+// Async factory — invoked by vi.mock('zustand', async () => { ... }) in test/setup.ts.
+// vi.importActual returns a Promise (unlike the old sync API).
+export default async () => {
+  const actual = await vi.importActual<typeof Zustand>('zustand');
 
-// reset all stores after each test run
-afterEach(() => {
-  act(() => {
-    storeResetFns.forEach(resetFn => {
-      resetFn();
-    });
-  });
-});
+  const create = (<T>(stateCreator: Zustand.StateCreator<T>) =>
+    typeof stateCreator === 'function'
+      ? createUncurried(stateCreator, actual.create)
+      : createUncurried) as typeof Zustand.create;
+
+  const createStore = (<T>(stateCreator: Zustand.StateCreator<T>) =>
+    typeof stateCreator === 'function'
+      ? createStoreUncurried(stateCreator, actual.createStore)
+      : createStoreUncurried) as typeof Zustand.createStore;
+
+  return { ...actual, create, createStore };
+};

eslint.config.mjs

@@ -46,8 +46,7 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.node,
-        ...globals.jest,
-        expect: true,
+        ...globals.vitest,
         __DEV__: true,
       },
 

package.json

@@ -82,24 +82,21 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
-    "build-lib": "tsc && vite build --config vite.config.lib.ts && pnpm run build-lib-css-entries",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "build-lib": "tsc -p tsconfig.build.json && vite build --config vite.config.lib.ts && pnpm run build-lib-css-entries",
     "build-lib-css-entries": "mkdir -p dist/styles && tailwindcss -i ./src/styles/components.css -o ./dist/styles/components.css --minify && pnpm run sync-theme-css",
     "sync-theme-css": "cp ./src/styles/theme.css ./dist/styles/theme.css && printf \"@import './styles/components.css';\\n@import './styles/theme.css';\\n\" > ./dist/style.css",
     "build-lib-css-components-watch": "mkdir -p dist/styles && tailwindcss -i ./src/styles/components.css -o ./dist/styles/components.css --watch --minify",
     "build-lib-theme-watch": "chokidar \"src/styles/theme.css\" -c \"pnpm run sync-theme-css\"",
     "build-lib-watch": "pnpm run sync-theme-css && concurrently -k -n vite,css,theme \"vite build --config vite.config.lib.ts --watch\" \"pnpm run build-lib-css-components-watch\" \"pnpm run build-lib-theme-watch\"",
     "check-types": "tsc --noemit",
     "prepack": "pnpm run build-lib",
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
     "lint": "eslint --cache --ext=.ts --ext=.tsx src/"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -120,7 +117,6 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.24",
     "@types/node": "^24.12.4",
     "@types/papaparse": "^5.5.2",
@@ -129,7 +125,9 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.60.0",
     "@typescript-eslint/parser": "^8.60.0",
-    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitest/coverage-istanbul": "^4.1.7",
+    "@vitest/ui": "^4.1.7",
     "autoprefixer": "^10.5.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.2.1",
@@ -140,9 +138,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^17.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-fixed-jsdom": "^0.0.11",
+    "jsdom": "^29.1.1",
     "msw": "^2.12.7",
     "postcss": "^8.5.15",
     "prettier": "^3.8.3",
@@ -152,12 +148,12 @@
     "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.1",
     "tailwindcss": "^3.4.19",
-    "ts-jest": "^29.4.11",
     "typescript": "^5.9.3",
-    "vite": "^6.4.2",
+    "vite": "^8.0.13",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.1.7",
     "whatwg-fetch": "^3.6.20"
   },
   "peerDependencies": {