feat(vitest) use vitest instead of react-scripts for tests

Signed-off-by: David Edler <david.edler@canonical.com>

package.json

@@ -19,7 +19,7 @@
     "hooks-remove": "husky uninstall",
     "start": "concurrently --kill-others --raw 'vite --host | grep -v 3000' 'yarn serve'",
     "serve": "./entrypoint",
-    "test-js": "react-scripts test src/ --watchAll=false"},
+    "test-js": "vitest --run"},
   "dependencies": {
     "@canonical/react-components": "0.47.3",
     "@monaco-editor/react": "4.6.0",
@@ -37,7 +37,6 @@
     "react-cytoscapejs": "2.0.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.21.3",
-    "react-scripts": "5.0.1",
     "react-useportal": "1.0.19",
     "serve": "14.2.1",
     "vanilla-framework": "4.6.0",
@@ -89,7 +88,8 @@
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
     "vite": "4.5.2",
-    "vite-tsconfig-paths": "4.3.1"
+    "vite-tsconfig-paths": "4.3.1",
+    "vitest": "1.2.1"
   },
   "lint-staged": {
     "src/**/*.{json,jsx,ts,tsx}": [

src/util/config.spec.tsx → src/util/config.spec.ts

@@ -1,5 +1,6 @@
 import { configDescriptionToHtml, toConfigFields } from "./config";
 import { LxcConfigOptionCategories } from "types/config";
+import { describe, expect, it } from "vitest";
 
 const exampleConfig: LxcConfigOptionCategories = {
   acme: {

src/util/formDevices.spec.tsx → src/util/formDevices.spec.ts

@@ -2,6 +2,7 @@ import { formDeviceToPayload, parseDevices } from "./formDevices";
 import { yamlToObject } from "./yaml";
 import { LxdInstance } from "types/instance";
 import { dump as dumpYaml } from "js-yaml";
+import { describe, expect, it } from "vitest";
 
 const deviceYaml =
   "devices:\n" +

src/util/networks.spec.tsx → src/util/networks.spec.ts

@@ -1,5 +1,6 @@
 import { areNetworksEqual, testValidIp, testValidPort } from "./networks";
 import { LxdNetwork } from "types/network";
+import { describe, expect, it } from "vitest";
 
 describe("areNetworksEqual", () => {
   it("accepts matches", () => {

src/util/operations.spec.tsx → src/util/operations.spec.ts

@@ -1,5 +1,6 @@
 import { getInstanceName, getProjectName } from "./operations";
 import { LxdOperation } from "types/operation";
+import { describe, expect, it } from "vitest";
 
 const craftOperation = (url: string) => {
   return {

src/util/searchAndFilter.spec.tsx → src/util/searchAndFilter.spec.ts

@@ -1,4 +1,5 @@
 import { paramsFromSearchData, searchParamsToChips } from "./searchAndFilter";
+import { describe, expect, it } from "vitest";
 
 describe("paramsFromSearchData and searchParamsToChips", () => {
   it("translates searchdata to url params", () => {

src/util/storageVolume.spec.tsx → src/util/storageVolume.spec.ts

@@ -1,5 +1,6 @@
 import { LxdStorageVolume } from "types/storage";
 import { getSnapshotsPerVolume } from "./storageVolume";
+import { describe, expect, it } from "vitest";
 
 describe("getSnapshotsPerVolume", () => {
   it("no snapshot volumes", () => {

src/util/usedBy.spec.tsx → src/util/usedBy.spec.ts

@@ -1,5 +1,5 @@
 import { filterUsedByType } from "./usedBy";
-
+import { describe, expect, it } from "vitest";
 describe("filterUsedByType", () => {
   it("finds standard instance", () => {
     const paths = ["/1.0/instances/pet-lark"];

tsconfig.json

@@ -35,6 +35,7 @@
     "playwright.config.ts",
     "webpack.config.js",
     "./tests/*.ts",
-    "vite.config.ts"
+    "vite.config.ts",
+    "vitest.config.ts"
   ],
 }

vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    include: ["./src/**/*.spec.{ts,tsx}"],
+  },
+});