update vitest setup

react-advanced-tag1/package.json

@@ -7,7 +7,12 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
+    "test:coverage:report": "vitest --coverage --reporter=html",
+    "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html"
   },
   "dependencies": {
     "react": "^19.0.0",
@@ -16,13 +21,17 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",

react-advanced-tag1/src/components/Footer.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import Footer from "./Footer";
+import { describe, it, expect } from "vitest";
+
+describe("Footer Component", () => {
+    it("should render the footer with correct content", () => {
+        render(<Footer />);
+        expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined();
+    });
+});

react-advanced-tag1/vite.config.ts

@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite'
+import { defineConfig, UserConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  test: {
+    // 👋 add the line below to add jsdom to vite
+    environment: 'jsdom',
+  }
+} as UserConfig)