fix: resolve TypeScript errors in test files - Add null checks for DOM queries - Replace toHaveClass with classList.contains() - Complete mockPopperProps with required Floating UI properties

Author: codomposer

src/test/month_dropdown_options_test.test.tsx

@@ -119,7 +119,10 @@ describe("MonthDropdownOptions", () => {
     const monthOptions = container.querySelectorAll(
       ".react-datepicker__month-option",
     );
-    fireEvent.keyDown(monthOptions[5], { key: "Enter" });
+    const monthOption = monthOptions[5];
+    if (monthOption) {
+      fireEvent.keyDown(monthOption, { key: "Enter" });
+    }
 
     expect(handleChange).toHaveBeenCalledWith(5);
   });

src/test/popper_component_test.test.tsx

@@ -52,6 +52,13 @@ const mockPopperProps = {
     left: 20,
   },
   placement: "bottom" as const,
+  strategy: "absolute" as const,
+  middlewareData: {},
+  x: 0,
+  y: 0,
+  isPositioned: true,
+  update: jest.fn(),
+  elements: {},
   context: {},
   arrowRef: { current: null },
 };
@@ -96,7 +103,7 @@ describe("PopperComponent", () => {
     );
 
     const popper = container.querySelector(".react-datepicker-popper");
-    expect(popper).toHaveClass("custom-popper-class");
+    expect(popper?.classList.contains("custom-popper-class")).toBe(true);
   });
 
   it("should apply wrapperClassName to wrapper", () => {
@@ -108,7 +115,7 @@ describe("PopperComponent", () => {
     );
 
     const wrapper = container.querySelector(".react-datepicker-wrapper");
-    expect(wrapper).toHaveClass("custom-wrapper-class");
+    expect(wrapper?.classList.contains("custom-wrapper-class")).toBe(true);
   });
 
   it("should render arrow when showArrow is true", () => {
@@ -137,7 +144,7 @@ describe("PopperComponent", () => {
     );
 
     const arrow = getByTestId("floating-arrow");
-    expect(arrow).toHaveClass("react-datepicker__triangle");
+    expect(arrow.classList.contains("react-datepicker__triangle")).toBe(true);
   });
 
   it("should wrap popper in TabLoop", () => {
@@ -273,9 +280,9 @@ describe("PopperComponent", () => {
     );
 
     const wrapper = container.querySelector(".react-datepicker-wrapper");
-    expect(wrapper).toHaveClass("react-datepicker-wrapper");
-    expect(wrapper).toHaveClass("custom-wrapper");
-    expect(wrapper).toHaveClass("extra-class");
+    expect(wrapper?.classList.contains("react-datepicker-wrapper")).toBe(true);
+    expect(wrapper?.classList.contains("custom-wrapper")).toBe(true);
+    expect(wrapper?.classList.contains("extra-class")).toBe(true);
   });
 
   it("should combine popper classes correctly", () => {
@@ -288,9 +295,9 @@ describe("PopperComponent", () => {
     );
 
     const popper = container.querySelector(".react-datepicker-popper");
-    expect(popper).toHaveClass("react-datepicker-popper");
-    expect(popper).toHaveClass("custom-class");
-    expect(popper).toHaveClass("extra-class");
+    expect(popper?.classList.contains("react-datepicker-popper")).toBe(true);
+    expect(popper?.classList.contains("custom-class")).toBe(true);
+    expect(popper?.classList.contains("extra-class")).toBe(true);
   });
 
   it("should not render popper content when hidePopper is undefined (defaults to true)", () => {

src/test/year_test.test.tsx

@@ -30,8 +30,8 @@ describe("Year", () => {
     const yearItems = container.querySelectorAll(
       ".react-datepicker__year-text",
     );
-    const firstYear = yearItems[0].textContent;
-    const lastYear = yearItems[11].textContent;
+    const firstYear = yearItems[0]?.textContent;
+    const lastYear = yearItems[11]?.textContent;
 
     expect(firstYear).toBe("2017");
     expect(lastYear).toBe("2028");
@@ -397,7 +397,7 @@ describe("Year", () => {
     );
 
     const year2020 = container.querySelector(".react-datepicker__year-2020");
-    expect(year2020).toHaveClass("react-datepicker__year-text--disabled");
+    expect(year2020?.classList.contains("react-datepicker__year-text--disabled")).toBe(true);
   });
 
   it("should handle included dates", () => {
@@ -421,7 +421,7 @@ describe("Year", () => {
     );
 
     const year2020 = container.querySelector(".react-datepicker__year-2020");
-    expect(year2020).toHaveClass("react-datepicker__year-text--disabled");
+    expect(year2020?.classList.contains("react-datepicker__year-text--disabled")).toBe(true);
   });
 
   it("should call handleOnKeyDown when provided", () => {