feat(react): add playwright and adjust tests; update packages; (#1430)

Author: Lipata

packages/cli/templates/react/igr-ts/projects/_base/files/package.json

@@ -4,30 +4,31 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "element-internals-polyfill": "^1.3.10",
+    "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
     "react": "^19.1.0",
-    "react-app-polyfill": "^0.2.0",
+    "react-app-polyfill": "^3.0.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^6.16.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "vitest": "^0.34.4"
+    "react-router-dom": "^7.9.3",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
-    "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^9.20.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "jsdom": "^22.1.0",
-    "typescript": "~5.5.4",
-    "vite": "^4.4.9",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.6",
+    "vitest": "^3.2.4",
+    "@vitest/browser": "^3.2.4",
+    "@vitejs/plugin-react": "^5.0.3",
     "vitest-canvas-mock": "^0.3.3",
+    "playwright": "^1.55.1",
     "igniteui-cli": "~$(cliVersion)"
   },
   "scripts": {

packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
@@ -9,15 +9,14 @@ export default defineConfig({
   },
   plugins: [react()],
   test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./src/setupTests.ts'],
-    deps: {
-      optimizer: {
-        web: {
-          include: ['vitest-canvas-mock'],
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      instances: [
+        {
+          browser: 'chromium'
         },
-      },
+      ],
     },
   },
   resolve: {