chore: setup vitest and react testing library, add pre-push hook

.husky/pre-push

@@ -1,2 +1,2 @@
 #!/bin/sh
-pnpm lint
+pnpm test:ci

eslint.config.js

@@ -72,6 +72,7 @@ export default [
       "copy-types.js",
       "**/*.config.js",
       "vite.config.ts",
+      "vitest.config.ts",
       "generate-exports.js",
     ],
   },

package.json

@@ -19,7 +19,9 @@
     "prepublishOnly": "pnpm build",
     "format:changed": "git diff --name-only --diff-filter=d HEAD | grep -e 'src.*\\.[jt]sx\\?$' -e 'src.*\\.json$' -e 'src.*\\.css$' -e 'src.*\\.md$' | xargs prettier -u --write",
     "prepare": "husky install",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:ci": "vitest --run"
   },
   "keywords": [],
   "author": "",
@@ -42,6 +44,9 @@
     "@storybook/react-vite": "8.4.7",
     "@storybook/test": "8.4.7",
     "@storybook/theming": "^8.4.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
@@ -58,6 +63,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
@@ -69,7 +75,8 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.20.0",
     "vite": "^5.4.11",
-    "vite-plugin-eslint": "^1.8.1"
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": "^18.0.0",

src/avatar/Avatar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import Avatar from "./Avatar";
+
+const imageUrl =
+  "https://gravatar.com/avatar/c8cf6521c193fc743c7fadcd8be04e983724764efa65b3c3913b6d22f086a11f?s=200&r=g&d=robohash";
+
+describe("Avatar Component", () => {
+  it("renders image correctly", () => {
+    render(
+      <Avatar>
+        <img alt="avatar" src={imageUrl} width={40} height={40} />
+      </Avatar>,
+    );
+
+    const image = screen.getByRole("img", { name: /avatar/i });
+
+    expect(image).toBeInTheDocument();
+  });
+
+  it("handles transparent avatars", () => {
+    render(
+      <Avatar>
+        <img alt="avatar" src={imageUrl} width={40} height={40} />
+      </Avatar>,
+    );
+
+    const image: HTMLImageElement = screen.getByRole("img", {
+      name: /avatar/i,
+    });
+
+    const avatarElement = image.parentElement;
+
+    expect(avatarElement).toHaveClass("bg-base-200");
+  });
+});

src/setupTest.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

tsconfig.json

@@ -9,7 +9,8 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "types": ["vite/client", "vitest"],
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "dist"]

vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig, mergeConfig } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      globals: true,
+      environment: "jsdom",
+      setupFiles: "./src/setupTest.ts",
+    },
+  }),
+);