Feat: Enhance vitest setup

package.json

@@ -76,6 +76,10 @@
     "@tanstack/react-query-devtools": "^5.59.19",
     "@tanstack/router-devtools": "^1.79.0",
     "@tanstack/router-plugin": "^1.79.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
@@ -89,6 +93,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
     "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",

src/routes/-components/RepositoriesSection.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import RepositoriesSection, { ALL_LANGS } from "./RepositoriesSection";
+import { projects } from "@/data/projects";
+import { renderWithRouter } from "../../../tests/utils";
+
+describe("Repositories Section", () => {
+  it("should render the section heading", () => {
+    render(<RepositoriesSection projects={[]} />);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+
+  it("should render the search input", () => {
+    render(<RepositoriesSection projects={[]} />);
+    expect(screen.getByTestId("project-search")).toBeInTheDocument();
+  });
+
+  it("should render filter tags", () => {
+    renderWithRouter(() => <RepositoriesSection projects={projects} />);
+
+    const filterLangs = [
+      ALL_LANGS,
+      ...new Set(projects.flatMap((p) => p.languages)),
+    ];
+
+    filterLangs.forEach((lang) => {
+      expect(screen.getByTestId(`btn-filter-${lang}`)).toBeInTheDocument();
+    });
+  });
+
+  it("should render the provided projects", () => {
+    renderWithRouter(() => <RepositoriesSection projects={projects} />);
+    projects.forEach((project) => {
+      expect(screen.getByText(project.repository)).toBeInTheDocument();
+      expect(screen.getByText(project.description)).toBeInTheDocument();
+    });
+  });
+
+  it("handles empty projects array gracefully", () => {
+    render(<RepositoriesSection projects={[]} />);
+
+    expect(screen.queryByTestId("learn-more-link")).not.toBeInTheDocument();
+  });
+
+  it("renders 'Learn more' links correctly", () => {
+    renderWithRouter(() => <RepositoriesSection projects={projects} />);
+    screen.getAllByTestId("learn-more-link").forEach((link, index) => {
+      expect(link).toHaveAttribute("href", projects[index].link);
+    });
+  });
+});

src/routes/-components/RepositoriesSection.tsx

@@ -12,7 +12,7 @@ export type Project = {
   link: string;
 };
 
-const ALL_LANGS = "All";
+export const ALL_LANGS = "All";
 
 type Props = {
   projects: Project[]; // get 6 projects
@@ -45,22 +45,24 @@ export default function RepositoriesSection({ projects }: Props) {
   }, [projects, searchTerm, selectedLanguage]);
 
   return (
-    <section className="border-brand-green-5 border-y px-5 pb-16 pt-5">
-      <h2 className="text-brand-gray-8 text-center text-[28px]/8 font-semibold md:text-[32px]/[38px]">
+    <section className="border-y border-brand-green-5 px-5 pb-16 pt-5">
+      <h2 className="text-center text-[28px]/8 font-semibold text-brand-gray-8 md:text-[32px]/[38px]">
         Access the largest directory of open-source projects
       </h2>
-      <p className="text-sm/base text-brand-gray-1/80 mt-[10px] text-center">
+      <p className="text-sm/base mt-[10px] text-center text-brand-gray-1/80">
         Use advanced filters to find a project you love and make your first
         commit message.
       </p>
 
-      <div className="border-brand-green-5 bg-brand-1/20 mx-auto mt-[30px] w-full rounded-[12px] border px-5 py-10 lg:max-w-[1256px] lg:px-6 lg:py-[55px]">
+      <div className="mx-auto mt-[30px] w-full rounded-[12px] border border-brand-green-5 bg-brand-1/20 px-5 py-10 lg:max-w-[1256px] lg:px-6 lg:py-[55px]">
         <div className="mx-auto max-w-[1030px]">
-          <div className="border-brand-green-1/80 bg-brand-gray-3/15 mx-auto flex w-full max-w-[690px] items-center gap-3 rounded-[12px] border px-5 py-4 md:px-6">
+          <div className="mx-auto flex w-full max-w-[690px] items-center gap-3 rounded-[12px] border border-brand-green-1/80 bg-brand-gray-3/15 px-5 py-4 md:px-6">
             <CustomIcons.search className="size-4 shrink-0" />
             <input
               type="text"
-              className="text-brand-gray-2 flex-1 bg-transparent text-sm/[18px] focus:outline-none"
+              name="project-search"
+              data-testid="project-search"
+              className="flex-1 bg-transparent text-sm/[18px] text-brand-gray-2 focus:outline-none"
               placeholder="Search project"
               onChange={(e) => {
                 const value = e.target.value.trim();
@@ -76,8 +78,9 @@ export default function RepositoriesSection({ projects }: Props) {
               {filterLanguages.map((lang) => (
                 <button
                   key={lang}
+                  data-testid={`btn-filter-${lang}`}
                   className={cn(
-                    "min-w-[40px] shrink-0 whitespace-nowrap rounded-full border px-2.5 py-1 font-ff-poppins text-sm text-white",
+                    "btn-filter min-w-[40px] shrink-0 whitespace-nowrap rounded-full border px-2.5 py-1 font-ff-poppins text-sm text-white",
                     lang === selectedLanguage
                       ? "border-brand-green-2/80 bg-brand-gray-7"
                       : "border-brand-gray-9/80",
@@ -97,27 +100,28 @@ export default function RepositoriesSection({ projects }: Props) {
             {searchedProjects.map((project, index) => (
               <div
                 key={index}
-                className="border-brand-green-5/80 bg-brand-gray-4/[.53] relative isolate overflow-hidden rounded-[12px] border px-4 pb-5 pt-7"
+                className="project relative isolate overflow-hidden rounded-[12px] border border-brand-green-5/80 bg-brand-gray-4/[.53] px-4 pb-5 pt-7"
               >
                 <CustomIcons.ossIcon className="absolute right-0 top-0 -z-[1]" />
                 <div className="flex justify-end">
-                  <span className="border-brand-gray-9/80 rounded-full border px-2.5 py-1 font-ff-poppins text-sm text-white">
+                  <span className="rounded-full border border-brand-gray-9/80 px-2.5 py-1 font-ff-poppins text-sm text-white">
                     {project.issuesCount} Issues
                   </span>
                 </div>
                 <div className="mb-5 mt-[105px] space-y-2">
-                  <p className="text-brand-gray-5 text-lg/[21px] font-semibold">
+                  <p className="text-lg/[21px] font-semibold text-brand-gray-5">
                     {project.repository}
                   </p>
                   <p className="text-sm/4 text-white">{project.description}</p>
-                  <p className="text-brand-gray-6 text-sm/4">
+                  <p className="text-sm/4 text-brand-gray-6">
                     Lang: {project.languages.join(", ")}
                   </p>
                 </div>
 
                 <Link
                   to={project.link}
-                  className="border-brand-green-3 bg-brand-green-4 block w-max rounded-[30px] border px-4 py-2"
+                  data-testid={"learn-more-link"}
+                  className="block w-max rounded-[30px] border border-brand-green-3 bg-brand-green-4 px-4 py-2"
                 >
                   Learn more
                 </Link>

tests/setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+afterEach(() => {
+  cleanup();
+});

tests/utils/index.tsx

@@ -0,0 +1,35 @@
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { render } from "@testing-library/react";
+import React from "react";
+
+/**
+ * Utility function for rendering a React component with routing context using `@tanstack/react-router`.
+ * Useful for testing components that rely on routing or are part of a routed application.
+ */
+export const renderWithRouter = (Comp: React.ComponentType) => {
+  const rootRoute = createRootRoute();
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/",
+    component: () => <Comp />,
+  });
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([indexRoute]),
+  });
+
+  return render(
+    <RouterProvider
+      router={
+        // suppress router type mismatch
+        router as unknown as Parameters<typeof RouterProvider>[0]["router"]
+      }
+    />,
+  );
+};

tsconfig.app.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vitest/globals"],
 
     /* Bundler mode */
     "moduleResolution": "Bundler",
@@ -26,5 +27,5 @@
       "~/*": ["./src/*"]
     }
   },
-  "include": ["src"]
+  "include": ["src", "tests/setup.ts"]
 }

tsconfig.node.json

@@ -4,6 +4,7 @@
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vitest/globals"],
 
     /* Bundler mode */
     "moduleResolution": "Bundler",
@@ -18,11 +19,11 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-        "baseUrl": ".",
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
       "~/*": ["./src/*"]
     }
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "tests/setup.ts"]
 }

vite.config.ts

@@ -25,7 +25,10 @@ export default defineConfig({
     host: true,
   },
   test: {
+    globals: true,
+    environment: "jsdom",
     include: ["./src/**/*.{test,spec}.?(c|m)[jt]s?(x)"],
     exclude: ["e2e-tests", "node_modules"],
+    setupFiles: "./tests/setup.ts",
   },
 });