feat: migrate to Vitest (#748)

Author: huyenltnguyen

.github/copilot-instructions.md

@@ -10,7 +10,7 @@ This is the freeCodeCamp UI component library, built with React and Tailwind CSS
 - Each component folder typically contains:
   - `*.tsx`: Component implementation
   - `*.stories.tsx`: Storybook stories
-  - `*.test.tsx`: Jest tests
+  - `*.test.tsx`: Vitest tests
   - `types.ts`: TypeScript types for props
 - Components are exported via `src/index.ts`.
 - Styles are managed with Tailwind CSS. The main stylesheet is `src/base.css`, built to `dist/base.css`.
@@ -20,7 +20,7 @@ This is the freeCodeCamp UI component library, built with React and Tailwind CSS
 
 - **Install dependencies:** `pnpm install`
 - **Run Storybook:** `pnpm run storybook` (see components in isolation)
-- **Run tests:** `pnpm test` (Jest, Testing Library)
+- **Run tests:** `pnpm test` (Vitest, Testing Library)
 - **Lint:** `pnpm lint`
 - **Typecheck:** `pnpm typecheck`
 - **Build:** `pnpm run build` (runs clean, CSS build, JS build)
@@ -29,7 +29,7 @@ This is the freeCodeCamp UI component library, built with React and Tailwind CSS
 
 ## Testing
 
-- Tests use Jest and React Testing Library.
+- Tests use Vitest and React Testing Library.
 - CSS imports are stubbed in tests via `__mocks__/styleMock.ts`.
 - Use the `should` style for assertions.
 

eslint.config.mjs

@@ -3,8 +3,7 @@ import tseslint from "typescript-eslint";
 import reactPlugin from "eslint-plugin-react";
 import reactHooksPlugin from "eslint-plugin-react-hooks";
 import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
-import jestPlugin from "eslint-plugin-jest";
-import jestDomPlugin from "eslint-plugin-jest-dom";
+import vitestPlugin from "eslint-plugin-vitest";
 import testingLibraryPlugin from "eslint-plugin-testing-library";
 import globals from "globals";
 
@@ -63,17 +62,6 @@ export default [
 		},
 	},
 
-	// Jest DOM recommended
-	{
-		files: ["**/*.{js,jsx,ts,tsx}"],
-		plugins: {
-			"jest-dom": jestDomPlugin,
-		},
-		rules: {
-			...jestDomPlugin.configs.recommended.rules,
-		},
-	},
-
 	// Testing Library React
 	{
 		files: ["**/*.{js,jsx,ts,tsx}"],
@@ -89,16 +77,15 @@ export default [
 	{
 		files: ["**/*.test.{js,ts,jsx,tsx}", "**/*.spec.{js,ts,jsx,tsx}"],
 		plugins: {
-			jest: jestPlugin,
+			vitest: vitestPlugin,
 		},
 		languageOptions: {
 			globals: {
-				...jestPlugin.environments.globals.globals,
+				...vitestPlugin.environments.env.globals,
 			},
 		},
 		rules: {
-			...jestPlugin.configs.recommended.rules,
-			...jestPlugin.configs.style.rules,
+			...vitestPlugin.configs.recommended.rules,
 		},
 	},
 

jest-setup.ts

@@ -42,8 +42,8 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:theming": "pnpm run storybook --no-manager-cache",
     "clean": "rm -rf dist/*",
-    "gen-component": "ts-node ./utils/gen-component-script",
-    "test": "jest",
+    "gen-component": "tsx ./utils/gen-component-script",
+    "test": "vitest",
     "prepare": "husky",
     "typecheck": "tsc"
   },
@@ -82,31 +82,29 @@
     "@storybook/blocks": "8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-webpack5": "8.6.14",
-    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.6.1",
-    "@types/jest": "29.5.14",
     "@types/prismjs": "1.26.5",
     "@types/react": "16.14.68",
     "@types/react-dom": "16.9.25",
     "@types/sanitize-html": "2.16.0",
+    "@vitest/ui": "4.0.18",
     "autoprefixer": "10.4.22",
     "babel-loader": "8.4.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "cross-env": "7.0.3",
     "css-loader": "6.11.0",
     "eslint": "9.39.2",
-    "eslint-plugin-jest": "29.12.1",
-    "eslint-plugin-jest-dom": "5.5.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-testing-library": "7.15.4",
+    "eslint-plugin-vitest": "0.5.4",
     "globals": "17.3.0",
     "husky": "9.1.7",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jsdom": "25.0.1",
     "lint-staged": "15.5.2",
     "npm-run-all2": "5.0.2",
     "postcss": "8.5.6",
@@ -119,11 +117,11 @@
     "storybook": "8.6.17",
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.18",
-    "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.54.0"
+    "typescript-eslint": "8.54.0",
+    "vitest": "4.0.18"
   },
   "keywords": [
     "storybook",