Migrate to Vite and switch testing framework to Vitest

.vscode/extensions.json

@@ -3,7 +3,7 @@
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
   // List of extensions which should be recommended for users of this workspace.
-  "recommendations": ["streetsidesoftware.code-spell-checker", "statelyai.stately-vscode", "GitHub.copilot"],
+  "recommendations": ["streetsidesoftware.code-spell-checker", "GitHub.copilot", "vitest.explorer"],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-  "unwantedRecommendations": []
+  "unwantedRecommendations": ["orta.vscode-jest"]
 }

.vscode/launch.json

@@ -5,52 +5,31 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "node", // Jest runs under node, that's why we set up this value
-      "request": "launch", // launch a program.
-      "name": "Jest Current File", // // This is the configuration name you will see in debug sidebar
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": ["${relativeFile}"],
-      // args: test: we are indicating that we want to launch tests.
-      // runInBand: run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
-      // no-cache: Disable the cache, Jest caches transformed module files to speed up test execution (in some scenarios this can lead to issues when debugging).
-      // watchAll: Watch files for changes and rerun all tests when there is an update on any of the files. Since we are performing a single run we set this flag to false.
-      "env": {
-        "cross-env": "1",
-        "NODE_PATH": "./src",
-        "__PLATFORM__": " WEB"
-      },
+      "type": "node",
+      "request": "launch",
+      "name": "Vitest Current File",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["test", "--", "--run", "${relativeFile}"],
       "console": "integratedTerminal",
-      "internalConsoleOptions": "openOnSessionStart",
-      "outputCapture": "std"
+      "internalConsoleOptions": "openOnSessionStart"
     },
     {
-      "type": "node", // Jest runs under node, that's why we set up this value
-      "request": "launch", // launch a program.
-      "name": "Jest All", // // This is the configuration name you will see in debug sidebar
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": ["${workspaceFolder}/src/tests"],
-      // args: test: we are indicating that we want to launch tests.
-      // runInBand: run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
-      // no-cache: Disable the cache, Jest caches transformed module files to speed up test execution (in some scenarios this can lead to issues when debugging).
-      // watchAll: Watch files for changes and rerun all tests when there is an update on any of the files. Since we are performing a single run we set this flag to false.
-      "env": {
-        "cross-env": "1",
-        "NODE_PATH": "./src",
-        "__PLATFORM__": " WEB"
-      },
+      "type": "node",
+      "request": "launch",
+      "name": "Vitest All",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["test", "--", "--run"],
       "console": "integratedTerminal",
-      "internalConsoleOptions": "openOnSessionStart",
-      "outputCapture": "std"
+      "internalConsoleOptions": "openOnSessionStart"
     },
     {
       "type": "node",
-      "name": "vscode-jest-tests",
       "request": "launch",
+      "name": "Vitest Watch",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["test"],
       "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "cwd": "${workspaceFolder}",
-      "args": ["--runInBand", "--watchAll=false"]
+      "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
-  "jest.jestCommandLine": "node_modules/.bin/jest",
+  "vitest.enable": true,
+  "vitest.commandLine": "npm test --",
   "cSpell.words": [
     "Akkurat",
     "bubbletip",

eslint.config.mjs

@@ -1,7 +1,6 @@
 import { defineConfig } from "eslint/config";
 import globals from "globals";
 import react from "eslint-plugin-react";
-import jestDom from "eslint-plugin-jest-dom";
 import js from "@eslint/js";
 import tseslint from "typescript-eslint";
 import reactHooks from "eslint-plugin-react-hooks"
@@ -11,7 +10,6 @@ export default defineConfig([
   react.configs.flat.recommended,
   react.configs.flat["jsx-runtime"],
   tseslint.configs.recommended,
-  jestDom.configs["flat/recommended"],
   reactHooks.configs.flat.recommended,
   {
     languageOptions: {

public/index.html → index.html

@@ -9,5 +9,6 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/entry-points/index.tsx"></script>
   </body>
 </html>