chore(deps-dev,test): migrate vitest 4

- Migration to Vitest 4
- update dependencies to the latest

Co-authored-by: Jae Sung Park <[email protected]>

Author: netil

package.json

@@ -102,62 +102,63 @@
 		"d3-zoom": "^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^19.8.1",
-		"@commitlint/config-conventional": "^19.8.1",
-		"@eslint/js": "^9.35.0",
-		"@rollup/plugin-node-resolve": "^16.0.1",
-		"@rollup/plugin-replace": "^6.0.2",
-		"@rollup/plugin-typescript": "^12.1.4",
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/js": "^9.39.1",
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"@rollup/plugin-replace": "^6.0.3",
+		"@rollup/plugin-typescript": "^12.3.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.1",
 		"@semantic-release/exec": "^7.1.0",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/npm": "^12.0.2",
+		"@semantic-release/npm": "^13.1.1",
 		"@semantic-release/release-notes-generator": "^14.1.0",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.0",
 		"@types/d3": "^7.4.3",
-		"@types/sinon": "^17.0.4",
-		"@vitest/browser": "^3.2.4",
-		"@vitest/coverage-istanbul": "^3.2.4",
-		"@vitest/ui": "^3.2.4",
+		"@types/sinon": "^20.0.0",
+		"@vitest/browser": "^4.0.8",
+		"@vitest/browser-playwright": "^4.0.8",
+		"@vitest/coverage-istanbul": "^4.0.8",
+		"@vitest/ui": "^4.0.8",
 		"better-docs": "^2.7.3",
 		"clean-webpack-plugin": "^4.0.0",
 		"cloc": "2.6.0-cloc",
-		"core-js": "^3.45.1",
+		"core-js": "^3.46.0",
 		"coveralls": "^3.1.1",
-		"cross-env": "^10.0.0",
+		"cross-env": "^10.1.0",
 		"css-loader": "^7.1.2",
 		"d3-color": "^3.1.0",
 		"d3-delaunay": "^6.0.4",
 		"d3-format": "^3.1.0",
 		"d3-polygon": "^3.0.1",
 		"docdash": "^2.0.2",
-		"dprint": "^0.50.1",
-		"esbuild-loader": "^4.3.0",
-		"eslint": "^9.35.0",
+		"dprint": "^0.50.2",
+		"esbuild-loader": "^4.4.0",
+		"eslint": "^9.39.1",
 		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-jsdoc": "^54.5.0",
+		"eslint-plugin-jsdoc": "^61.2.0",
 		"husky": "^9.1.7",
-		"jsdoc": "^4.0.4",
-		"lint-staged": "^16.1.6",
+		"jsdoc": "^4.0.5",
+		"lint-staged": "^16.2.6",
 		"mini-css-extract-plugin": "^2.9.4",
-		"playwright": "^1.55.0",
+		"playwright": "^1.56.1",
 		"regenerator-runtime": "^0.14.1",
-		"rollup": "^4.50.1",
+		"rollup": "^4.53.2",
 		"rollup-plugin-delete": "^3.0.1",
-		"sass": "^1.92.1",
-		"sass-loader": "^16.0.5",
-		"semantic-release": "^24.2.7",
+		"sass": "^1.94.0",
+		"sass-loader": "^16.0.6",
+		"semantic-release": "^25.0.2",
 		"simulant": "^0.2.2",
 		"sinon": "^21.0.0",
 		"string-replace-loader": "^3.2.0",
 		"style-loader": "^4.0.0",
 		"tslib": "^2.8.1",
-		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.42.0",
-		"vitest": "^3.2.4",
-		"webpack": "^5.101.3",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.4",
+		"vitest": "^4.0.8",
+		"webpack": "^5.102.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-clean": "^1.2.5",
 		"webpack-cli": "^6.0.1",

vitest.config.ts

@@ -1,5 +1,6 @@
 import {resolve} from "node:path";
 import {defineConfig} from "vitest/config";
+import { playwright } from "@vitest/browser-playwright";
 
 export default defineConfig({
     optimizeDeps: {
@@ -8,7 +9,6 @@ export default defineConfig({
     css: {
         preprocessorOptions: {
             scss: {
-                api: "modern-compiler",
                 silenceDeprecations: ["legacy-js-api"]
             }        
         }
@@ -22,9 +22,8 @@ export default defineConfig({
             reporter: ["text-summary", "html", "lcovonly"],
             enabled: true,
             include: [
-                "src/**/**",
-            ],
-            extension: ["ts"]
+                `src/**/**.{ts, tsx}`,
+            ]
         },
         include: [
             "test/**/*-spec.ts"
@@ -42,7 +41,7 @@ export default defineConfig({
         pool: "threads",
         browser: {
             enabled: true,
-            provider: "playwright",
+            provider:  playwright(),
             headless: true,
             viewport: {
                 width: 800,