diff --git a/packages/dayjs/__mocks__/index.ts b/packages/dayjs/__mocks__/index.ts
new file mode 100644
index 0000000000..762cf69650
--- /dev/null
+++ b/packages/dayjs/__mocks__/index.ts
@@ -0,0 +1,15 @@
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import dayjs from "@calcom/dayjs";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const mockDayjs = vi.fn((date) => dayjs(date));
+
+mockDayjs.utc = vi.fn((date) => dayjs.utc(date));
+mockDayjs.tz = vi.fn();
+mockDayjs.extend = vi.fn();
+
+export default mockDayjs;
diff --git a/packages/features/auth/__mocks__/Turnstile.tsx b/packages/features/auth/__mocks__/Turnstile.tsx
new file mode 100644
index 0000000000..2543c9ded6
--- /dev/null
+++ b/packages/features/auth/__mocks__/Turnstile.tsx
@@ -0,0 +1,7 @@
+vi.mock("@calcom/features/auth/Turnstile", () => ({
+  default: ({ onVerify }: { onVerify: (token: string) => void }) => (
+    <div data-testid="turnstile-captcha" onClick={() => onVerify("test-token")}>
+      Mock Captcha
+    </div>
+  ),
+}));
diff --git a/packages/features/bookings/Booker/__mocks__/config.ts b/packages/features/bookings/Booker/__mocks__/config.ts
new file mode 100644
index 0000000000..3629a432ff
--- /dev/null
+++ b/packages/features/bookings/Booker/__mocks__/config.ts
@@ -0,0 +1,5 @@
+vi.mock("../config", () => ({
+  useBookerResizeAnimation: () => ({ current: document.createElement("div") }),
+  getBookerSizeClassNames: () => [],
+  fadeInLeft: {},
+}));
diff --git a/packages/features/bookings/Booker/__mocks__/store.ts b/packages/features/bookings/Booker/__mocks__/store.ts
new file mode 100644
index 0000000000..31788506ea
--- /dev/null
+++ b/packages/features/bookings/Booker/__mocks__/store.ts
@@ -0,0 +1,37 @@
+import { vi } from "vitest";
+
+const mockStore = {
+  state: {
+    username: "",
+    eventSlug: "",
+    eventId: undefined,
+    layout: "month_view",
+    month: undefined,
+    bookingUid: null,
+    isTeamEvent: false,
+    bookingData: null,
+    verifiedEmail: null,
+    rescheduleUid: null,
+    rescheduledBy: null,
+    seatReferenceUid: undefined,
+    durationConfig: null,
+    org: null,
+    isInstantMeeting: false,
+    timezone: null,
+    teamMemberEmail: null,
+    crmOwnerRecordType: null,
+    crmAppSlug: null,
+  },
+  setSelectedDate: vi.fn(),
+  setMonth: vi.fn(),
+  setTimeFormat: vi.fn(),
+  setLayout: vi.fn(),
+  setVerifiedEmail: vi.fn(),
+  setState: vi.fn(),
+};
+
+vi.mock("../store", () => ({
+  useBookerStore: vi.fn(() => mockStore),
+}));
+
+export default mockStore;
diff --git a/packages/features/bookings/Booker/__tests__/Booker.test.tsx b/packages/features/bookings/Booker/__tests__/Booker.test.tsx
new file mode 100644
index 0000000000..e30c83e205
--- /dev/null
+++ b/packages/features/bookings/Booker/__tests__/Booker.test.tsx
@@ -0,0 +1,265 @@
+import "@calcom/features/bookings/Booker/__mocks__/config";
+import "@calcom/features/bookings/Booker/components/OverlayCalendar/__mocks__/OverlayCalendar";
+import "@calcom/features/bookings/Booker/components/__mocks__/AvailableTimeSlots";
+import "@calcom/features/bookings/Booker/components/__mocks__/DatePicker";
+import "@calcom/features/bookings/Booker/components/__mocks__/DryRunMessage";
+import "@calcom/features/bookings/Booker/components/__mocks__/EventMeta";
+import "@calcom/features/bookings/Booker/components/__mocks__/Header";
+import "@calcom/features/bookings/Booker/components/__mocks__/LargeCalendar";
+import "@calcom/features/bookings/Booker/components/__mocks__/Section";
+import { constantsScenarios } from "@calcom/lib/__mocks__/constants";
+import "@calcom/lib/__mocks__/logger";
+
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import "@calcom/dayjs/__mocks__";
+import "@calcom/features/auth/Turnstile";
+
+import { Booker } from "../Booker";
+import { useBookerStore } from "../store";
+import type { BookerState } from "../types";
+
+// Mock components that we don't want to test
+vi.mock("../components/BookEventForm", () => ({
+  BookEventForm: ({
+    isTimeslotUnavailable,
+    onCancel,
+  }: {
+    isTimeslotUnavailable: boolean;
+    onCancel: () => void;
+  }) => {
+    console.log("BookEventForm Called", { isTimeslotUnavailable, onCancel });
+    return (
+      <div data-testid="book-event-form" data-unavailable={isTimeslotUnavailable}>
+        Mock Book Event Form
+        <button onClick={onCancel}>cancel</button>
+      </div>
+    );
+  },
+}));
+
+vi.mock("../components/BookEventForm/BookFormAsModal", () => ({
+  BookFormAsModal: () => {
+    return <div data-testid="book-form-as-modal">Mock Book Form As Modal</div>;
+  },
+}));
+
+const mockEvent = {
+  data: {
+    id: 1,
+    title: "Test Event",
+    seatsPerTimeSlot: 1,
+    seatsShowAvailabilityCount: true,
+  },
+  isSuccess: true,
+  isPending: false,
+};
+
+const mockSchedule = {
+  data: {
+    slots: {
+      "2024-01-01": [{ time: "2024-01-01T10:00:00Z" }, { time: "2024-01-01T11:00:00Z" }],
+    },
+  },
+  isPending: false,
+  invalidate: vi.fn(),
+};
+
+vi.mock("@calcom/atoms/hooks/useIsPlatformBookerEmbed", () => ({
+  useIsPlatformBookerEmbed: () => false,
+}));
+
+vi.mock("@calcom/atoms/hooks/useIsPlatform", () => ({
+  useIsPlatform: () => false,
+}));
+
+// Update mockStoreState to include all required state
+const mockStoreState = {
+  state: "booking" as BookerState,
+  setState: vi.fn(),
+  selectedDate: "2024-01-01",
+  seatedEventData: {},
+  setSeatedEventData: vi.fn(),
+  tentativeSelectedTimeslots: [],
+  setTentativeSelectedTimeslots: vi.fn(),
+  dayCount: 7,
+  setDayCount: vi.fn(),
+  setSelectedTimeslot: vi.fn(),
+  selectedTimeslot: null,
+  formStep: 0,
+  setFormStep: vi.fn(),
+  bookerState: "booking",
+  setBookerState: vi.fn(),
+  layout: "default",
+  setLayout: vi.fn(),
+};
+
+// Update defaultProps to include missing required props
+const defaultProps = {
+  username: "testuser",
+  eventSlug: "test-event",
+  entity: { considerUnpublished: false },
+  event: mockEvent,
+  schedule: mockSchedule,
+  slots: {
+    selectedTimeslot: "2024-01-01T10:00:00Z",
+    setSelectedTimeslot: vi.fn(),
+    allSelectedTimeslots: ["2024-01-01T10:00:00Z"],
+    quickAvailabilityChecks: [],
+  },
+  bookerForm: {
+    key: "form-key",
+    bookerFormErrorRef: { current: null },
+    formEmail: "",
+    bookingForm: {
+      watch: vi.fn(),
+      setValue: vi.fn(),
+      getValues: vi.fn().mockReturnValue({ responses: {} }),
+    },
+    errors: {},
+  },
+  bookings: {
+    handleBookEvent: vi.fn(),
+    errors: {},
+    loadingStates: {},
+    expiryTime: 0,
+    instantVideoMeetingUrl: "",
+  },
+  verifyEmail: {
+    isEmailVerificationModalVisible: false,
+    setEmailVerificationModalVisible: vi.fn(),
+    handleVerifyEmail: vi.fn(),
+    renderConfirmNotVerifyEmailButtonCond: true,
+    isVerificationCodeSending: false,
+  },
+  calendars: {
+    overlayBusyDates: [],
+    isOverlayCalendarEnabled: false,
+    connectedCalendars: [],
+    loadingConnectedCalendar: false,
+    onToggleCalendar: vi.fn(),
+  },
+  bookerLayout: {
+    shouldShowFormInDialog: false,
+    extraDays: 7,
+    columnViewExtraDays: { current: 7 },
+    isMobile: false,
+    layout: "MONTH_VIEW",
+    hideEventTypeDetails: false,
+    isEmbed: false,
+    bookerLayouts: { enabledLayouts: [] },
+    hasDarkBackground: false,
+  },
+  verifyCode: null,
+  isPlatform: false,
+  orgBannerUrl: null,
+  customClassNames: {},
+  areInstantMeetingParametersSet: false,
+  userLocale: "en",
+  hasValidLicense: true,
+  isBookingDryRun: false,
+  renderCaptcha: false,
+  onConnectNowInstantMeeting: vi.fn(),
+  onGoBackInstantMeeting: vi.fn(),
+  onOverlayClickNoCalendar: vi.fn(),
+  onClickOverlayContinue: vi.fn(),
+  onOverlaySwitchStateChange: vi.fn(),
+  extraOptions: {},
+  sessionUsername: null,
+  rescheduleUid: null,
+  hasSession: false,
+  isInstantMeeting: false,
+};
+
+describe("Booker", () => {
+  beforeEach(() => {
+    constantsScenarios.set({
+      PUBLIC_QUICK_AVAILABILITY_ROLLOUT: 100,
+    });
+    vi.clearAllMocks();
+  });
+
+  it("should render null when in loading state", () => {
+    useBookerStore.setState({
+      ...mockStoreState,
+      state: "loading",
+    });
+
+    const { container } = render(<Booker {...defaultProps} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should render DryRunMessage when in dry run mode", () => {
+    useBookerStore.setState({
+      ...mockStoreState,
+      state: "selecting_time",
+      selectedDate: "2024-01-01",
+      selectedTimeslot: "2024-01-01T10:00:00Z",
+      tentativeSelectedTimeslots: ["2024-01-01T10:00:00Z"],
+    });
+
+    const propsWithDryRun = {
+      ...defaultProps,
+      isBookingDryRun: true,
+      event: {
+        ...mockEvent,
+        data: {
+          ...mockEvent.data,
+          isDynamic: false,
+        },
+      },
+    };
+
+    render(<Booker {...propsWithDryRun} />);
+    expect(screen.getByTestId("dry-run-message")).toBeInTheDocument();
+  });
+
+  it("should invalidate schedule when cancelling booking form", () => {
+    const mockInvalidate = vi.fn();
+    constantsScenarios.set({
+      PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM: "true",
+    });
+    const propsWithInvalidate = {
+      ...defaultProps,
+      schedule: {
+        ...mockSchedule,
+        invalidate: mockInvalidate,
+      },
+    };
+    useBookerStore.setState({
+      ...mockStoreState,
+      state: "booking",
+    });
+
+    render(<Booker {...propsWithInvalidate} />);
+    screen.logTestingPlaygroundURL();
+    // Trigger form cancel
+    const cancelButton = screen.getByRole("button", { name: /cancel/i });
+    cancelButton.click();
+
+    expect(mockInvalidate).toHaveBeenCalled();
+    expect(defaultProps.slots.setSelectedTimeslot).toHaveBeenCalledWith(null);
+  });
+
+  describe("Schedule and Availability Check", () => {
+    it("should mark timeslot as unavailable based on quick availability checks", async () => {
+      const propsWithQuickChecks = {
+        ...defaultProps,
+        slots: {
+          ...defaultProps.slots,
+          quickAvailabilityChecks: [{ utcStartIso: "2024-01-01T10:00:00Z", status: "unavailable" }],
+        },
+      };
+
+      useBookerStore.setState({
+        ...mockStoreState,
+        state: "booking",
+      });
+
+      render(<Booker {...propsWithQuickChecks} />);
+      const bookEventForm = screen.getByTestId("book-event-form");
+      await expect(bookEventForm).toHaveAttribute("data-unavailable", "true");
+    });
+  });
+});
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/__mocks__/OverlayCalendar.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/__mocks__/OverlayCalendar.tsx
new file mode 100644
index 0000000000..6aa405031c
--- /dev/null
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/__mocks__/OverlayCalendar.tsx
@@ -0,0 +1,21 @@
+import { vi } from "vitest";
+
+const mockOverlayCalendar = vi.fn(() => {
+  return {
+    connectedCalendars: [],
+    overlayBusyDates: [],
+    onToggleCalendar: vi.fn(),
+    isOverlayCalendarEnabled: false,
+    loadingConnectedCalendar: false,
+    handleClickNoCalendar: vi.fn(),
+    handleSwitchStateChange: vi.fn(),
+    handleClickContinue: vi.fn(),
+    hasSession: false,
+  };
+});
+
+vi.mock("../OverlayCalendar", () => ({
+  OverlayCalendar: mockOverlayCalendar,
+}));
+
+export default mockOverlayCalendar;
diff --git a/packages/features/bookings/Booker/components/__mocks__/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/__mocks__/AvailableTimeSlots.tsx
new file mode 100644
index 0000000000..28449479a0
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/AvailableTimeSlots.tsx
@@ -0,0 +1,5 @@
+vi.mock("../AvailableTimeSlots", () => ({
+  AvailableTimeSlots: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="available-time-slots">{children}</div>
+  ),
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/DatePicker.tsx b/packages/features/bookings/Booker/components/__mocks__/DatePicker.tsx
new file mode 100644
index 0000000000..be3b15129a
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/DatePicker.tsx
@@ -0,0 +1,3 @@
+vi.mock("../components/DatePicker", () => ({
+  DatePicker: () => <div data-testid="date-picker">Mock Date Picker</div>,
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/DryRunMessage.tsx b/packages/features/bookings/Booker/components/__mocks__/DryRunMessage.tsx
new file mode 100644
index 0000000000..b5d58bb43f
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/DryRunMessage.tsx
@@ -0,0 +1,5 @@
+vi.mock("../DryRunMessage", () => ({
+  DryRunMessage: ({ isEmbed }: { isEmbed: boolean }) => (
+    <div data-testid="dry-run-message">Mock Dry Run Message</div>
+  ),
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/EventMeta.tsx b/packages/features/bookings/Booker/components/__mocks__/EventMeta.tsx
new file mode 100644
index 0000000000..c326960df8
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/EventMeta.tsx
@@ -0,0 +1,16 @@
+import { vi } from "vitest";
+
+vi.mock("../EventMeta", () => ({
+  EventMeta: () => {
+    return (
+      <div>
+        <h2>Test Event</h2>
+        <p>Test Description</p>
+        <div>
+          <span>30 minutes</span>
+          <span>Free</span>
+        </div>
+      </div>
+    );
+  },
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/Header.tsx b/packages/features/bookings/Booker/components/__mocks__/Header.tsx
new file mode 100644
index 0000000000..ae6e7334cf
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/Header.tsx
@@ -0,0 +1,4 @@
+// Mock layout components
+vi.mock("../Header", () => ({
+  Header: ({ children }: { children: React.ReactNode }) => <div data-testid="header">{children}</div>,
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/LargeCalendar.tsx b/packages/features/bookings/Booker/components/__mocks__/LargeCalendar.tsx
new file mode 100644
index 0000000000..00ece154b4
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/LargeCalendar.tsx
@@ -0,0 +1,13 @@
+import { vi } from "vitest";
+
+vi.mock("../LargeCalendar", () => ({
+  LargeCalendar: ({ extraDays, schedule }: { extraDays: number; schedule: any }) => {
+    return (
+      <div>
+        <h2>Test Large Calendar</h2>
+        <p>Extra Days: {extraDays}</p>
+        <p>Schedule: {JSON.stringify(schedule)}</p>
+      </div>
+    );
+  },
+}));
diff --git a/packages/features/bookings/Booker/components/__mocks__/Section.tsx b/packages/features/bookings/Booker/components/__mocks__/Section.tsx
new file mode 100644
index 0000000000..7c1c364be0
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/Section.tsx
@@ -0,0 +1,22 @@
+vi.mock("../Section", () => {
+  const BookerSection = ({
+    children,
+    className = "",
+    area,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    area?: string | { default: string; month_view: string };
+  }) => {
+    console.log("BookerSection", { type: children.type, children, className, area });
+    return (
+      <div
+        data-testid="booker-section"
+        className={className}
+        data-area={typeof area === "string" ? area : area?.default}>
+        {children}
+      </div>
+    );
+  };
+  return { BookerSection };
+});
diff --git a/packages/features/bookings/Booker/components/__mocks__/Unavailable.tsx b/packages/features/bookings/Booker/components/__mocks__/Unavailable.tsx
new file mode 100644
index 0000000000..97ef28e6a4
--- /dev/null
+++ b/packages/features/bookings/Booker/components/__mocks__/Unavailable.tsx
@@ -0,0 +1,3 @@
+vi.mock("../components/Unavailable", () => ({
+  NotFound: () => <div data-testid="not-found">Mock Not Found</div>,
+}));
diff --git a/packages/lib/__mocks__/constants.ts b/packages/lib/__mocks__/constants.ts
index 2f97915477..b7d45d23c3 100644
--- a/packages/lib/__mocks__/constants.ts
+++ b/packages/lib/__mocks__/constants.ts
@@ -6,6 +6,20 @@ const mockedConstants = {
   IS_PRODUCTION: false,
   IS_TEAM_BILLING_ENABLED: false,
   WEBSITE_URL: "",
+  PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM: true,
+  CLOUDFLARE_SITE_ID: "test-site-id",
+  CLOUDFLARE_USE_TURNSTILE_IN_BOOKER: "1",
+  DEFAULT_LIGHT_BRAND_COLOR: "#292929",
+  DEFAULT_DARK_BRAND_COLOR: "#fafafa",
+  CALCOM_VERSION: "0.0.0",
+  IS_SELF_HOSTED: false,
+  SEO_IMG_DEFAULT: "https://cal.com/og-image.png",
+  SEO_IMG_OGIMG: "https://cal.com/og-image-wide.png",
+  SEO_IMG_LOGO: "https://cal.com/logo.png",
+  CURRENT_TIMEZONE: "Europe/London",
+  APP_NAME: "Cal.com",
+  BOOKER_NUMBER_OF_DAYS_TO_LOAD: 14,
+  PUBLIC_QUICK_AVAILABILITY_ROLLOUT: 100,
 } as typeof constants;
 
 vi.mock("@calcom/lib/constants", () => {
@@ -31,4 +45,11 @@ export const constantsScenarios = {
     // @ts-ignore
     mockedConstants.WEBSITE_URL = url;
   },
+  set: (envVariables: Record<string, string>) => {
+    Object.entries(envVariables).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      mockedConstants[key] = value;
+    });
+  },
 };
diff --git a/packages/lib/__mocks__/logger.ts b/packages/lib/__mocks__/logger.ts
new file mode 100644
index 0000000000..2c5decf19f
--- /dev/null
+++ b/packages/lib/__mocks__/logger.ts
@@ -0,0 +1,16 @@
+import { vi } from "vitest";
+
+const mockLogger = {
+  debug: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  log: vi.fn(),
+  warn: vi.fn(),
+  getSubLogger: vi.fn(),
+};
+
+vi.mock("@calcom/lib/logger", () => ({
+  default: mockLogger,
+}));
+
+export default mockLogger;
diff --git a/packages/lib/__mocks__/next-seo.config.ts b/packages/lib/__mocks__/next-seo.config.ts
new file mode 100644
index 0000000000..5f3f751a2e
--- /dev/null
+++ b/packages/lib/__mocks__/next-seo.config.ts
@@ -0,0 +1,17 @@
+vi.mock("@calcom/lib/next-seo.config", () => ({
+  default: {
+    headSeo: {
+      siteName: "Cal.com",
+    },
+    defaultNextSeo: {
+      title: "Cal.com",
+      description: "Scheduling infrastructure for everyone.",
+    },
+  },
+  seoConfig: {
+    headSeo: {
+      siteName: "Cal.com",
+    },
+  },
+  buildSeoMeta: vi.fn().mockReturnValue({}),
+}));
diff --git a/packages/ui/components/__mocks__/UnpublishedEntity.tsx b/packages/ui/components/__mocks__/UnpublishedEntity.tsx
new file mode 100644
index 0000000000..417ad57b6c
--- /dev/null
+++ b/packages/ui/components/__mocks__/UnpublishedEntity.tsx
@@ -0,0 +1,5 @@
+import { vi } from "vitest";
+
+vi.mock("../unpublished-entity/UnpublishedEntity", () => ({
+  UnpublishedEntity: () => <div data-testid="unpublished-entity">Mock Unpublished Entity</div>,
+}));
diff --git a/packages/ui/components/test-setup.ts b/packages/ui/components/test-setup.tsx
similarity index 73%
rename from packages/ui/components/test-setup.ts
rename to packages/ui/components/test-setup.tsx
index 2150479a20..beb3908a42 100644
--- a/packages/ui/components/test-setup.ts
+++ b/packages/ui/components/test-setup.tsx
@@ -6,12 +6,33 @@ import { afterEach, expect, vi } from "vitest";
 // For next.js webapp compponent that use "preserve" for jsx in tsconfig.json
 global.React = React;
 
+vi.mock("framer-motion", () => ({
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  LazyMotion: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  m: {
+    span: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+    div: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  },
+  useReducedMotion: () => false,
+  useAnimate: () => [null, vi.fn()],
+}));
+
+// Add new mocks
+vi.mock("next-seo", () => ({
+  NextSeo: () => null,
+  LogoJsonLd: () => null,
+}));
+
 vi.mock("@calcom/features/ee/organizations/hooks", () => ({
   useOrgBrandingValues() {
     return {};
   },
 }));
 
+vi.mock("react-sticky-box", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div data-testid="sticky-box">{children}</div>,
+}));
+
 vi.mock("@calcom/features/ee/organizations/context/provider", () => ({
   useOrgBranding() {
     return {};
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
index e22b599930..85fc2528a4 100644
--- a/vitest.workspace.ts
+++ b/vitest.workspace.ts
@@ -110,7 +110,7 @@ const workspaces = packagedEmbedTestsOnly
           include: ["packages/features/**/*.{test,spec}.tsx"],
           exclude: ["packages/features/form-builder/**/*", "packages/features/bookings/**/*"],
           environment: "jsdom",
-          setupFiles: ["setupVitest.ts", "packages/ui/components/test-setup.ts"],
+          setupFiles: ["setupVitest.ts", "packages/ui/components/test-setup.tsx"],
         },
       },
 
@@ -128,7 +128,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/app-store-core",
           include: ["packages/app-store/*.{test,spec}.[jt]s?(x)"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {
@@ -137,7 +137,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/routing-forms",
           include: ["packages/app-store/routing-forms/**/*.test.tsx"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {
@@ -146,7 +146,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/ui",
           include: ["packages/ui/components/**/*.{test,spec}.[jt]s?(x)"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {
@@ -155,7 +155,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/features/form-builder",
           include: ["packages/features/form-builder/**/*.{test,spec}.[jt]sx"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {
@@ -164,7 +164,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/features/bookings",
           include: ["packages/features/bookings/**/*.{test,spec}.[jt]sx"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {
@@ -173,7 +173,7 @@ const workspaces = packagedEmbedTestsOnly
           name: "@calcom/web/components",
           include: ["apps/web/components/**/*.{test,spec}.[jt]sx"],
           environment: "jsdom",
-          setupFiles: ["packages/ui/components/test-setup.ts"],
+          setupFiles: ["packages/ui/components/test-setup.tsx"],
         },
       },
       {