Setup Vitest

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+bun.lock
 
 # testing
 /coverage

__tests__/Home.test.tsx

@@ -0,0 +1,12 @@
+import { test } from "vitest";
+import { render } from "@testing-library/react"
+import SamplePage from "@/app/sample/page";
+
+
+test("Sample page render", () => {
+  render(<SamplePage />)
+  console.log("Sampel page render Success")
+
+})
+
+

app/page.tsx

@@ -3,10 +3,10 @@ import { CategoryMenu, Hero, Incentives, IntroducingSection, Newsletter, Product
 export default function Home() {
   return (
     <>
-    <Hero />
-    <IntroducingSection />
-    <CategoryMenu />
-    <ProductsSection />
+      <Hero />
+      <IntroducingSection />
+      <CategoryMenu />
+      <ProductsSection />
     </>
   );
 }

app/sample/page.tsx

@@ -0,0 +1,9 @@
+const SamplePage = () => {
+  return (
+    <div>
+      <h4>Same Page</h4>
+    </div>
+  )
+}
+
+export default SamplePage

package.json

@@ -7,6 +7,7 @@
     "build": "prisma generate && next build",   
     "start": "next start",
     "lint": "next lint",
+    "test": "vitest"
     "db:generate": "prisma generate",
     "db:push": "prisma db push",
     "db:studio": "prisma studio"
@@ -16,8 +17,6 @@
     "@prisma/client": "^6.16.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/bcryptjs": "^2.4.6",
-    "@types/react-slick": "^0.23.13",
     "bcryptjs": "^2.4.3",
     "date-fns": "^4.1.0",
     "dompurify": "^3.0.8",
@@ -39,6 +38,18 @@
     "zustand": "^4.5.1"
   },
   "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/react-slick": "^0.23.13",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^5.0.2",
+    "autoprefixer": "^10.0.1",
+    "daisyui": "^4.7.2",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "jsdom": "^26.1.0",
     "@types/dompurify": "^3.0.5",
     "@types/node": "^24.3.3",
     "@types/react": "^18.3.24",
@@ -50,6 +61,9 @@
     "postcss": "^8",
     "prisma": "^6.16.1",
     "tailwindcss": "^3.3.0",
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
     "typescript": "^5.9.2"
   }
 }

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: [react(), tsconfigPaths()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: "./vitest.setup.ts",
+
+    exclude: ["./node_modules/"]
+  },
+})

vitest.setup.ts

@@ -0,0 +1,18 @@
+
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+
+// Polyfill for matchMedia (needed by react-slick / enquire.js)
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});