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",
@@ -38,7 +38,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",
@@ -83,7 +82,8 @@
     "stylelint-scss": "6.0.0",
     "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}": [

tests/devices.spec.ts

@@ -73,9 +73,11 @@ test("profile edit custom volumes", async ({ page }) => {
   await saveProfile(page);
 
   await page.getByRole("row", { name: "Size 3GiB" }).click();
-  if (await page.getByRole("gridcell", { name: volume }).isVisible()) {
-    fail("Volume is still present");
-  }
+
+  const volumeVisible = await page
+    .getByRole("gridcell", { name: volume })
+    .isVisible();
+  test.fail(volumeVisible, "Volume is still present");
 
   await deleteProfile(page, profile);
   await deleteVolume(page, volume);

tsconfig.json

@@ -26,7 +26,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": false,
-    "sourceMap": true
+    "sourceMap": true,
+    "types": ["vitest/globals"]
   },
   "include": [
     "./src",
@@ -35,6 +36,7 @@
     "playwright.config.ts",
     "webpack.config.js",
     "./tests/*.ts",
-    "vite.config.ts"
+    "vite.config.ts",
+    "vitest.config.ts"
   ],
 }

vitest.config.ts

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