diff --git a/packages/ui/components/errorBoundary/error-boundary.test.tsx b/packages/ui/components/errorBoundary/error-boundary.test.tsx
new file mode 100644
index 0000000000..856bedd6ca
--- /dev/null
+++ b/packages/ui/components/errorBoundary/error-boundary.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { useEffect } from "react";
+
+import ErrorBoundary from "./ErrorBoundary";
+
+describe("ErrorBoundary", () => {
+  test("should render children when no error occurs", () => {
+    const { container } = render(
+      <ErrorBoundary>
+        <div>Child Component</div>
+      </ErrorBoundary>
+    );
+
+    const childElement = container.querySelector("div");
+    expect(childElement).toBeInTheDocument();
+    expect(childElement?.textContent).toBe("Child Component");
+  });
+
+  test("should render error message and error details when an error occurs", () => {
+    const ErrorThrowingComponent = () => {
+      useEffect(() => {
+        throw new Error("Test Error");
+      }, []);
+
+      return <div>Error Throwing Component</div>;
+    };
+
+    render(
+      <ErrorBoundary message="Error Message">
+        <ErrorThrowingComponent />
+      </ErrorBoundary>
+    );
+
+    const errorMessage = screen.getByText("Error Message");
+    const errorDetails = screen.getByText("Error: Test Error");
+    expect(errorMessage).toBeInTheDocument();
+    expect(errorDetails).toBeInTheDocument();
+  });
+});