diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx
new file mode 100644
index 00000000..804f63ed
--- /dev/null
+++ b/src/components/avatar/avatar.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { getByText, render, screen } from "@testing-library/react";
+import React from "react";
+import { Avatar } from "./avatar";
+
+describe("Avatar", () => {
+    it("renders an avatar with substring of child", () => {
+        const text = "Test User";
+        // ARRANGE
+        render(<Avatar color="primary">{text}</Avatar>);
+
+        // ASSERT
+        const alert = screen.getByRole("button");
+        expect(alert).toBeInTheDocument();
+        expect(getByText(alert, "Te")).toBeInTheDocument();
+    });
+});