Install and Use Vitest UI

ThomasCode92 · Dec 22, 2024 · deedd16 · deedd16
1 parent 6ea8062
commit deedd16
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "format": "prettier --write .",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -30,6 +31,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/eslint-plugin": "^1.1.18",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",

diff --git a/src/components/UI/FormInput.test.tsx b/src/components/UI/FormInput.test.tsx
@@ -10,7 +10,7 @@ test("should render with the correct label", () => {
 });
 
 test("should apply shrink classes when input has value", () => {
-  render(<FormInput label="Username" value="test" />);
+  render(<FormInput label="Username" value="test" onChange={vi.fn()} />);
   const labelElement = screen.getByText("Username");
   expect(labelElement).toHaveClass("-top-5 text-xs text-black");
 });