diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
new file mode 100644
index 0000000..1e19a9d
--- /dev/null
+++ b/src/components/Button/Button.test.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+
+import Button from "./Button";
+import styles from "./Button.module.css";
+
+beforeEach(() => {
+ vi.useFakeTimers();
+});
+afterEach(() => {
+ vi.restoreAllMocks();
+});
+
+test("render primary button", () => {
+ render();
+
+ const button = screen.getByRole("button", { name: "test" });
+
+ expect(button.className).includes(styles.primary);
+});
+
+test("render secondary button", () => {
+ render();
+
+ const button = screen.getByRole("button", { name: "test" });
+
+ expect(button.className).includes(styles.secondary);
+});
+
+test("debounce 300ms one click", async () => {
+ const mockOnClick = vi.fn();
+
+ render(
+ ,
+ );
+
+ const button = screen.getByRole("button", { name: "test" });
+
+ fireEvent.click(button);
+ fireEvent.click(button);
+ fireEvent.click(button);
+
+ await vi.advanceTimersByTimeAsync(300);
+
+ expect(mockOnClick).toHaveBeenCalledOnce();
+});