migrate jest to vitest

Author: L4Ph

package.json

@@ -44,8 +44,7 @@
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "build": "yarn type-check && yarn lint && vite build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "test": "vitest",
     "format": "prettier --write './src/**/*.{ts,tsx}'",
     "gen-types": "json2ts src/services/storage/assets/keyboard-definition-schema.json --style.singleQuote > src/gen/types/KeyboardDefinition.ts;",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -s public",
@@ -82,7 +81,6 @@
     "@types/ajv": "^1.0.0",
     "@types/axios": "^0.14.0",
     "@types/downloadjs": "^1.4.2",
-    "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.167",
     "@types/node": "^14.14.22",
     "@types/prop-types": "^15.7.4",
@@ -99,19 +97,21 @@
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "babel-eslint": "^10.1.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.21.5",
+    "happy-dom": "^14.12.0",
     "husky": "^4.3.6",
     "json-schema-to-typescript": "^10.1.2",
     "lint-staged": "^10.5.3",
     "prettier": "^3.2.5",
-    "react-scripts": "^4.0.1",
     "sinon": "^11.1.2",
     "vite": "^5.2.12",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vitest": "^1.6.0"
   },
   "husky": {
     "hooks": {

tsconfig.json

@@ -18,12 +18,12 @@
     "typeRoots": ["node_modules/@types", "node_modules", "src/@types"],
     "types": [
       "node",
-      "@types/jest",
       "@types/w3c-web-hid",
       "@types/w3c-web-usb",
       "@types/w3c-web-serial",
       "@types/wicg-file-system-access",
-      "vite/client"
+      "vite/client",
+      "vitest/globals"
     ]
   },
   "include": ["src"]

vite.config.ts

@@ -1,4 +1,5 @@
-import react from '@vitejs/plugin-react';
+/// <reference types="vitest" />
+import react from '@vitejs/plugin-react-swc';
 import { defineConfig, Plugin, loadEnv } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
@@ -15,20 +16,25 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 3000,
     },
+    test: {
+      globals: true,
+      environment: "happy-dom",
+      setupFiles: "setupTests.ts"
+    },
   };
 });
 
 function envPlugin(): Plugin {
   return {
-    name: 'env-plugin',
+    name: "env-plugin",
     config(_, { mode }) {
-      const env = loadEnv(mode, '.', ['REACT_APP_', 'NODE_ENV']);
+      const env = loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]);
       return {
         define: Object.fromEntries(
           Object.entries(env).map(([key, value]) => [
             `import.meta.env.${key}`,
             JSON.stringify(value),
-          ])
+          ]),
         ),
       };
     },