add test cases

babel.config.cjs

+module.exports = {
+    env: {
+        test: {
+            presets: [
+                [
+                    "@babel/preset-env",
+                    {
+                        targets: {
+                            node: "current",
+                        },
+                    },
+                ],
+            ],
+        },
+    },
+}
\ No newline at end of file

jest.config.js

+export default {
+    testEnvironment: "jsdom",
+    transform: {
+        "^.+\\.vue$": "@vue/vue3-jest",
+        "^.+\\js$": "babel-jest",
+    },
+    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$",
+    moduleFileExtensions: ["vue", "js"],
+    moduleNameMapper: {
+        "^@/(.*)$": "<rootDir>/src/$1",
+    },
+    coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
+    coverageReporters: ["text", "json-summary"],
+    // Fix in order for vue-test-utils to work with Jest 29
+    // https://test-utils.vuejs.org/migration/#test-runners-upgrade-notes
+    testEnvironmentOptions: {
+        customExportConditions: ["node", "node-addons"],
+    },
+}
\ No newline at end of file

package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "test": "jest"
   },
   "dependencies": {
     "axios": "^1.6.2",
@@ -17,16 +18,24 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.6",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.16",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^23.0.1",
     "postcss": "^8.4.32",
     "prettier": "^3.0.3",
     "sass": "^1.69.5",
     "tailwindcss": "^3.3.6",
-    "vite": "^5.0.5"
+    "vite": "^5.0.5",
+    "vitest": "^1.0.4"
   }
 }

src/Views/Contact/Contact.spec.js

+import { mount } from "@vue/test-utils"
+import About from "../About/About.vue";
+
+
+describe("notification.vue", () => {
+    test("sample", () => {
+   
+        const wrapper = mount(About,);
+        expect(wrapper.text()).toEqual(
+           "Contact page Loaded"
+        );
+    });
+});
\ No newline at end of file

src/components/ProductCard/ProductCard.spec.js

+import {shallowMount} from '@vue/test-utils';
+import ProductCard from '../ProductCard/ProductCard.vue';
+// import VueRouter from 'vue-router'
+
+
+
+
+describe('ProductCard',()=>{
+const wrapper = shallowMount(ProductCard,{
+    props:{
+        product: {
+            id: 5,
+            title: "braclet",
+            price: 695,
+            description: "From",
+            category: "jewelery",
+            image: "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
+            rating: {
+            rate: 4.6,
+            count: 400
+            }
+            }
+    },
+    stubs: ['router-link', 'router-view'],
+});
+
+    it("To test if the component loaded with card details",()=>{
+        console.log(wrapper.html(),"testing");
+        expect(wrapper.classes()).toContain('card');
+        expect(wrapper.find('.card-img').exists()).toBe(true);
+        const liList = wrapper.findAll('li');
+        expect(liList.at(0).text()).toBe('braclet');
+        expect(liList.at(1).text()).toBe("Price:$695");
+        expect(liList.at(2).text()).toBe("Category: jewelery")
+
+
+
+    });
+    
+    it("To test the router link loaded with correct routing value",()=>{
+        const router  = wrapper.find('router-link');
+        expect(router.attributes('to')).toBe('/categories/jewelery/5')
+    });
+
+})

src/components/ProductCard/ProductCard.vue

 <template>
     <div class="card">
-
         <div class="max-w-sm rounded overflow-hidden shadow-lg">
             <img class="w-full card-img p-10" :src="product.image" alt="Sunset in the mountains">
-            <div class="px-6 py-4 config">
+            <div class="px-6 py-4 configure">
                 <ul class="text-gray-700 text-base">
                     <li class="text-xl">{{ product.title }}</li>
                     <li>Price:${{ product.price }}</li>
@@ -35,8 +34,7 @@ export default {
         height: 20rem;
         width: 100%;
     }
-
-    .config {
+    .configure {
         min-height: 15rem;
     }
 }