diff --git a/src/app/[username]/components/ErrorMessages.test.tsx b/src/app/[username]/components/ErrorMessages.test.tsx
new file mode 100644
index 00000000..131634ec
--- /dev/null
+++ b/src/app/[username]/components/ErrorMessages.test.tsx
@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import ErrorMessages from "./ErrorMessages";
+import "@testing-library/jest-dom";
+
+describe("ErrorMessages", () => {
+ it("returns null when errors array is empty", () => {
+ const { container } = render();
+ expect(container.firstChild).toBeNull();
+ });
+
+ it("returns null when errors is undefined", () => {
+ // Typecast to any to test the falsy condition handled in the component
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const { container } = render();
+ expect(container.firstChild).toBeNull();
+ });
+
+ it("renders a single error message", () => {
+ const errors = [{ section: "API", message: "Failed to fetch data" }];
+ render();
+
+ expect(screen.getByText(/API:/)).toBeInTheDocument();
+ expect(screen.getByText(/Failed to fetch data/)).toBeInTheDocument();
+ });
+
+ it("renders multiple error messages", () => {
+ const errors = [
+ { section: "API", message: "Failed to fetch data" },
+ { section: "Database", message: "Connection timeout" }
+ ];
+ render();
+
+ expect(screen.getByText(/API:/)).toBeInTheDocument();
+ expect(screen.getByText(/Failed to fetch data/)).toBeInTheDocument();
+ expect(screen.getByText(/Database:/)).toBeInTheDocument();
+ expect(screen.getByText(/Connection timeout/)).toBeInTheDocument();
+ });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 94048567..288a6b01 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -22,7 +22,8 @@ export default defineConfig({
"src/components/SkillsCard.tsx",
"src/components/LayoutEditor.tsx",
"src/lib/rateLimit.ts",
- "src/app/api/og/[username]/route.tsx"
+ "src/app/api/og/[username]/route.tsx",
+ "src/app/[username]/components/ErrorMessages.tsx"
],
thresholds: {
lines: 80,