diff --git a/frontend/src/components/MessageTip/MessageTip.test.tsx b/frontend/src/components/MessageTip/MessageTip.test.tsx
new file mode 100644
index 0000000000..1c050c01f6
--- /dev/null
+++ b/frontend/src/components/MessageTip/MessageTip.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+
+import MessageTip from './index';
+
+describe('MessageTip', () => {
+	it('should not render when show prop is false', () => {
+		render(
+			<MessageTip
+				show={false}
+				message="Test Message"
+				action={<button type="button">Close</button>}
+			/>,
+		);
+
+		const messageTip = screen.queryByRole('alert');
+
+		expect(messageTip).toBeNull();
+	});
+
+	it('should render with the provided message and action', () => {
+		const message = 'Test Message';
+		const action = <button type="button">Close</button>;
+
+		render(<MessageTip show message={message} action={action} />);
+
+		const messageTip = screen.getByRole('alert');
+		const messageText = screen.getByText(message);
+		const actionButton = screen.getByRole('button', { name: 'Close' });
+
+		expect(messageTip).toBeInTheDocument();
+		expect(messageText).toBeInTheDocument();
+		expect(actionButton).toBeInTheDocument();
+	});
+
+	// taken from antd docs
+	// https://github.com/ant-design/ant-design/blob/master/components/alert/__tests__/index.test.tsx
+	it('custom action', () => {
+		const { container } = render(
+			<MessageTip
+				show
+				message="Success Tips"
+				action={<button type="button">Close</button>}
+			/>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});
diff --git a/frontend/src/components/MessageTip/__snapshots__/MessageTip.test.tsx.snap b/frontend/src/components/MessageTip/__snapshots__/MessageTip.test.tsx.snap
new file mode 100644
index 0000000000..044b288468
--- /dev/null
+++ b/frontend/src/components/MessageTip/__snapshots__/MessageTip.test.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageTip custom action 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="ant-alert ant-alert-info ant-alert-with-description c0 css-dev-only-do-not-override-1i536d8"
+  data-show="true"
+  role="alert"
+>
+  <span
+    aria-label="info-circle"
+    class="anticon anticon-info-circle ant-alert-icon"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      data-icon="info-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+      />
+    </svg>
+  </span>
+  <div
+    class="ant-alert-content"
+  >
+    <div
+      class="ant-alert-description"
+    >
+      Success Tips
+    </div>
+  </div>
+  <div
+    class="ant-alert-action"
+  >
+    <button
+      type="button"
+    >
+      Close
+    </button>
+  </div>
+</div>
+`;