wip

.vscode/extensions.json

@@ -4,6 +4,10 @@
     "dbaeumer.vscode-eslint",
     "jota0222.multi-formatter",
     "esbenp.prettier-vscode",
-    "biomejs.biome"
+    "biomejs.biome",
+    "vitest.explorer",
+    "wallabyjs.wallaby-vscode",
+    "file-icons.file-icons",
+    "usernamehw.errorlens"
   ]
 }

.vscode/settings.json

@@ -15,5 +15,8 @@
   "editor.formatOnSave": true,
   "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "biome_lsp.trace.server": "verbose",
-  "biome.lspBin": ".yarn/sdks/biome-lsp/bin/biome-lsp",
+  "vitest.watchOnStartup": true,
+  "vitest.showFailMessages": true,
+  "vitest.enable": true,
+  "vitest.commandLine": "yarn test -- ",
 }

package.json

@@ -24,6 +24,8 @@
     "lint:fix": "yarn lint:fix:biome && yarn lint:fix:next",
     "format": "yarn _conc 'yarn:format:biome' 'yarn:format:imports'",
     "format:fix": "yarn format:fix:biome && yarn format:fix:imports",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "build:ts": "next build",
     "build:ts:watch": "next dev --turbo",
     "build:scss": "yarn typed-scss-modules src --banner '// This file is automatically generated. Do not edit.'",
@@ -65,7 +67,6 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "20.11.19",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/ui": "^1.3.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
@@ -79,4 +80,4 @@
     "vitest": "^1.3.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/__tests__/page.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { expect, it, describe } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import Home from "../app/page";
+
+describe("Home component", () => {
+  it("should render the correct shortcut based on the OS", () => {
+    render(<Home />);
+
+    const shortcut = screen.getByText(/⌘+K|ctrl+K/i); // Matches either "⌘+K" or "ctrl+K"
+
+    expect(shortcut).toBeInTheDocument();
+  });
+});