Added Vitest

Author: lovoj-app

.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

bun.lock

@@ -6,15 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@prisma/client": "^5.10.2",
     "@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",
     "express-fileupload": "^1.5.0",
     "flowbite-react": "^0.7.2",
@@ -33,16 +32,23 @@
     "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",
     "postcss": "^8",
     "prisma": "^5.10.2",
     "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
   }
 }

package.json

@@ -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.config.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(),
+  })),
+});