diff --git a/packages/ui/components/form/datepicker/datepicker.test.tsx b/packages/ui/components/form/datepicker/datepicker.test.tsx
new file mode 100644
index 0000000000..0c6edeb3f4
--- /dev/null
+++ b/packages/ui/components/form/datepicker/datepicker.test.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, fireEvent } from "@testing-library/react";
+import { format } from "date-fns";
+import { vi } from "vitest";
+
+import DatePicker from "./DatePicker";
+
+describe("Tests for DatePicker component", () => {
+ const date = new Date("2023-07-15");
+
+ test("Should display the selected date correctly and call the onDatesChange callback when the selected date changes", () => {
+ const mockOnDatesChange = vi.fn((changedDate: Date) => format(new Date(changedDate), "yyyy-MM-dd"));
+ const { container } = render();
+
+ const day = container.querySelector('input[name="day"]') as HTMLInputElement;
+ const dayEvent = { target: { value: "27" } };
+
+ const month = container.querySelector('input[name="month"]') as HTMLInputElement;
+ const monthEvent = { target: { value: "06" } };
+
+ const year = container.querySelector('input[name="year"]') as HTMLInputElement;
+ const yearEvent = { target: { value: "2022" } };
+
+ fireEvent.change(day, dayEvent);
+ expect(mockOnDatesChange).toHaveReturnedWith("2023-07-27");
+
+ fireEvent.change(month, monthEvent);
+ expect(mockOnDatesChange).toHaveReturnedWith("2023-06-27");
+
+ fireEvent.change(year, yearEvent);
+ expect(mockOnDatesChange).toHaveReturnedWith("2022-06-27");
+
+ expect(mockOnDatesChange).toHaveBeenCalledTimes(3);
+ });
+
+ test("Should disable the DatePicker when disabled prop is true", () => {
+ const { getByDisplayValue } = render();
+
+ const dateInput = getByDisplayValue(format(date, "yyyy-MM-dd")) as HTMLInputElement;
+ expect(dateInput).toBeDisabled();
+ });
+});
+
+HTMLCanvasElement.prototype.getContext = vi.fn() as never;