feat: switch from jest to vitest

components/Button/Button.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Button } from './Button'
+
+describe('Button', () => {
+  it('renders with children', () => {
+    render(<Button href="/test">Click me</Button>)
+    expect(screen.getByText('Click me')).toBeInTheDocument()
+  })
+
+  it('applies correct intent classes', () => {
+    const { container } = render(<Button href="/test" intent="secondary">Secondary</Button>)
+    const link = container.querySelector('a')
+    expect(link).toHaveClass('bg-transparent')
+    expect(link).toHaveClass('text-blue-400')
+  })
+
+  it('applies correct size classes', () => {
+    const { container } = render(<Button href="/test" size="sm">Small</Button>)
+    const link = container.querySelector('a')
+    expect(link).toHaveClass('text-sm')
+    expect(link).toHaveClass('min-w-20')
+  })
+})

jest.config.js

@@ -1,14 +0,0 @@
-const nextJest = require("next/jest")
-
-const createJestConfig = nextJest({
-  dir: "./",
-})
-
-const customJestConfig = {
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
-  testEnvironment: "jest-environment-jsdom",
-  modulePathIgnorePatterns: ["<rootDir>/dist/"],
-  testPathIgnorePatterns: ["<rootDir>/e2e"],
-}
-
-module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -1,2 +0,0 @@
-// Learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom"

lp-items.tsx

@@ -96,7 +96,7 @@ export const LP_GRID_ITEMS = [
     ),
   },
   {
-    title: "Jest & React Testing Library",
+    title: "Vitest & React Testing Library",
     description: "For rock-solid unit and integration tests.",
     icon: (
       <svg

package.json

@@ -14,7 +14,10 @@
     "storybook": "cross-env FORCE_COLOR=1 storybook dev -p 6006",
     "test-storybook": "cross-env FORCE_COLOR=1 test-storybook",
     "build-storybook": "cross-env FORCE_COLOR=1 storybook build",
-    "test": "cross-env FORCE_COLOR=1 jest --passWithNoTests",
+    "test": "cross-env FORCE_COLOR=1 vitest",
+    "test:watch": "cross-env FORCE_COLOR=1 vitest --watch",
+    "test:ui": "cross-env FORCE_COLOR=1 vitest --ui",
+    "test:coverage": "cross-env FORCE_COLOR=1 vitest --coverage",
     "e2e:headless": "playwright test",
     "e2e:ui": "playwright test --ui",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
@@ -60,7 +63,6 @@
     "@babel/plugin-transform-optional-chaining": "^7.27.1",
     "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@jest/globals": "^29.7.0",
     "@next/eslint-plugin-next": "15.1.6",
     "@opentelemetry/api": "1.7.0",
     "@opentelemetry/resources": "1.18.1",
@@ -81,11 +83,12 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.3.1",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/jest": "^29.5.10",
     "@types/node": "^20.17.43",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/ui": "^3.2.4",
     "all-contributors-cli": "^6.26.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.26.0",
@@ -96,8 +99,7 @@
     "eslint-plugin-tailwindcss": "^3.18.0",
     "fetch-mock": "^9.11.0",
     "gzip-size": "6.0.0",
-    "jest": "^29.7.0",
+    "jsdom": "^26.1.0",
-    "jest-environment-jsdom": "^29.7.0",
     "mkdirp": "^3.0.1",
     "patch-package": "^8.0.0",
     "postcss": "^8.5.3",
@@ -108,11 +110,12 @@
     "semantic-release": "^22.0.12",
     "storybook": "^8.6.12",
     "tailwindcss": "^4.1.5",
-    "ts-jest": "^29.3.2",
     "tsc": "^2.0.4",
     "typed-query-selector": "^2.12.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4",
     "webpack": "5.94.0"
   },
   "engines": {

tsconfig.json

@@ -18,13 +18,13 @@
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": ".",
-    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "types": ["node", "vitest/globals", "@testing-library/jest-dom"],
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs", "jest.config.js", ".next/types/**/*.ts", "eslint.config.mjs"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs", "vitest.config.ts", ".next/types/**/*.ts", "eslint.config.mjs"],
   "exclude": ["node_modules"]
 }

vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+    globals: true,
+    testMatch: ['**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
+    exclude: ['**/node_modules/**', '**/dist/**', '**/e2e/**', '.next/**'],
+  },
+})

vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'