feat: Add vitest/ui, example component test, add test scripts

package.json

@@ -16,6 +16,8 @@
     "db:generate": "drizzle-kit generate",
     "db:studio": "drizzle-kit studio",
     "sys:info": "npx envinfo --system --binaries --browsers --npmPackages \"{svelte,@sveltejs/*,vite}\"",
+    "test": "npm run test:unit -- --run",
+    "test:ui": "vitest --ui",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run"
   },
@@ -38,6 +40,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
     "@types/better-sqlite3": "^7.6.12",
+    "@vitest/coverage-v8": "2.1.6",
     "@vitest/ui": "^2.1.6",
     "autoprefixer": "^10.4.20",
     "bits-ui": "1.0.0-next.72",

src/__tests__/components/pages/about.test.ts

@@ -0,0 +1,20 @@
+import About from "$lib/components/pages/about.svelte";
+
+import { render, screen } from "@testing-library/svelte";
+import { beforeEach, describe, expect, it } from "vitest";
+
+describe("<About />", () => {
+  beforeEach(() => {
+    render(About);
+  });
+
+  it("should have an H1 in the document", () => {
+    const pageHeading = screen.getByTestId("about-page-heading");
+    expect(pageHeading).toBeInTheDocument();
+  });
+
+  it("should have an H1 with text content 'About Us'", () => {
+    const pageHeading = screen.getByTestId("about-page-heading");
+    expect(pageHeading).toHaveTextContent("About Us");
+  });
+});

src/__tests__/unit/demo.spec.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("sum test", () => {
+  it("adds 1 + 2 to equal 3", () => {
+    expect(1 + 2).toBe(3);
+  });
+});

tsconfig.json

@@ -17,5 +17,6 @@
         "assumeIsSvelteProject": false
       }
     ]
-  }
+  },
+  "files": ["vitest.setup.ts"]
 }

vite.config.ts

@@ -1,15 +1,15 @@
 /* eslint-disable antfu/no-import-node-modules-by-path */
+/* eslint-disable node/prefer-global/process */
 
 // import fs from "node:fs";
 // import path from "node:path";
 
 import { enhancedImages } from "@sveltejs/enhanced-img";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { svelteTesting } from "@testing-library/svelte/vite";
-import { defineConfig } from "vitest/config";
-
 // import { visualizer } from "rollup-plugin-visualizer";
-// import viteCompression from "vite-plugin-compression";
+import viteCompression from "vite-plugin-compression";
+import { defineConfig } from "vitest/config";
 
 import svelteKitPackage from "./node_modules/@sveltejs/kit/package.json" with { type: "json" };
 import sveltePackage from "./node_modules/svelte/package.json" with { type: "json" };
@@ -20,7 +20,10 @@ export default defineConfig({
     sveltekit(),
     enhancedImages(),
     svelteTesting(),
-    // viteCompression({ algorithm: "brotliCompress" }),
+    viteCompression({
+      disable: true,
+      algorithm: "brotliCompress",
+    }),
     // visualizer({
     //   emitFile: true,
     //   filename: "stats.html",
@@ -36,16 +39,28 @@ export default defineConfig({
   //   },
   //   proxy: {},
   // },
+
   define: {
-    __NAME__: `"${pkg.name}"`,
-    __VERSION__: `"${pkg.version}"`,
-    __SVELTE_VERSION__: `"${sveltePackage.version}"`,
-    __SVELTEKIT_VERSION__: `"${svelteKitPackage.version}"`,
+    "__NAME__": `"${pkg.name}"`,
+    "__VERSION__": `"${pkg.version}"`,
+    "__SVELTE_VERSION__": `"${sveltePackage.version}"`,
+    "__SVELTEKIT_VERSION__": `"${svelteKitPackage.version}"`,
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
   },
 
   test: {
+    coverage: {
+      enabled: false,
+      provider: "v8",
+      exclude: [
+        ".svelte-kit/**",
+        "src/__tests__/**",
+        "src/lib/components/shadcn/**",
+      ],
+    },
+    globals: true,
     environment: "jsdom",
-    setupFiles: ["./vitest-setup.ts"],
+    setupFiles: ["./vitest.setup.ts"],
     include: ["src/**/*.{test,spec}.{js,ts}"],
   },
 });