From 26eec628893cb4450e12fa8a9e03f90cb6329be4 Mon Sep 17 00:00:00 2001
From: Balaji Sridharan <balaji.sridharan@nyulangone.org>
Date: Mon, 19 Aug 2024 15:01:09 +0530
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=F0=9F=A7=AA=20Refactor=20dat?=
 =?UTF-8?q?epicker=5Ftest's=20querySelector/querySelectorAll=20with=20safe?=
 =?UTF-8?q?QuerySelector/safeQuerySelectorAll=20to=20ensure=20element=20ex?=
 =?UTF-8?q?istence?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- This change prevents tests from passing with unexpected null elements, enhancing test reliability and catching potential issues earlier.

Closes #5038
---
 src/test/datepicker_test.test.tsx | 386 +++++++++++++++++-------------
 1 file changed, 219 insertions(+), 167 deletions(-)

diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index d395e82b1..ec3f7ccbf 100644
--- a/src/test/datepicker_test.test.tsx
+++ b/src/test/datepicker_test.test.tsx
@@ -27,7 +27,7 @@ import DatePicker, { registerLocale } from "../index";
 
 import CustomInput from "./helper_components/custom_input";
 import TestWrapper from "./helper_components/test_wrapper";
-import { getKey } from "./test_utils";
+import { getKey, safeQuerySelector } from "./test_utils";
 
 function getSelectedDayNode(container: HTMLElement) {
   return (
@@ -87,7 +87,7 @@ describe("DatePicker", () => {
 
   it("should retain the calendar open status when the document visibility change", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input");
+    const input = safeQuerySelector(container, "input");
 
     if (!input) {
       throw new Error("Input element not found");
@@ -104,12 +104,7 @@ describe("DatePicker", () => {
 
   it("should retain the calendar close status when the document visibility change", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input");
-
-    if (!input) {
-      throw new Error("Input element not found");
-    }
-
+    const input = safeQuerySelector(container, "input");
     fireEvent.click(input);
     expect(container.querySelector(".react-datepicker")).toBeTruthy();
 
@@ -124,14 +119,17 @@ describe("DatePicker", () => {
 
   it("should show the calendar when focusing on the date input", () => {
     const { container } = render(<DatePicker />);
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
   });
 
   it("should allow the user to supply a wrapper component for the popper", () => {
     const { container } = render(<DatePicker popperContainer={TestWrapper} />);
 
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
 
     expect(container.querySelectorAll(".test-wrapper").length).toBe(1);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
@@ -142,7 +140,8 @@ describe("DatePicker", () => {
       <DatePicker calendarContainer={TestWrapper} />,
     );
 
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
 
     expect(container.querySelectorAll(".test-wrapper").length).toBe(1);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
@@ -153,7 +152,8 @@ describe("DatePicker", () => {
       <DatePicker popperClassName="some-class-name" />,
     );
 
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
 
     const popper = container.querySelectorAll(".react-datepicker-popper");
     expect(popper.length).toBe(1);
@@ -163,7 +163,8 @@ describe("DatePicker", () => {
   it("should show the calendar when clicking on the date input", () => {
     const { container } = render(<DatePicker />);
 
-    fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.click(input);
 
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
   });
@@ -198,7 +199,8 @@ describe("DatePicker", () => {
   it("should not set open state when it is disabled and gets clicked", () => {
     const { container } = render(<DatePicker disabled />);
 
-    fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.click(input);
 
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
@@ -226,15 +228,13 @@ describe("DatePicker", () => {
     fireEvent.click(instance!.input!);
 
     // user may tab or arrow down to the current day (or some other element in the popper)
-    const today = div.querySelector<HTMLElement>(
-      ".react-datepicker__day--today",
-    );
+    const today = safeQuerySelector(div, ".react-datepicker__day--today");
     act(() => {
       today?.focus();
     });
 
     // user hits Escape
-    fireEvent.keyDown(today ?? new HTMLElement(), getKey(KeyType.Escape));
+    fireEvent.keyDown(today, getKey(KeyType.Escape));
 
     expect(instance!.calendar).toBeFalsy();
 
@@ -267,15 +267,13 @@ describe("DatePicker", () => {
     fireEvent.focus(instance!.input!);
 
     // user may tab or arrow down to the current day (or some other element in the popper)
-    const today = div.querySelector<HTMLElement>(
-      ".react-datepicker__day--today",
-    );
+    const today = safeQuerySelector(div, ".react-datepicker__day--today");
     act(() => {
       today?.focus();
     });
 
     // user hits Enter
-    fireEvent.keyDown(today ?? new HTMLElement(), getKey(KeyType.Enter));
+    fireEvent.keyDown(today, getKey(KeyType.Enter));
 
     expect(instance!.calendar).toBeFalsy();
 
@@ -307,15 +305,13 @@ describe("DatePicker", () => {
     fireEvent.focus(instance!.input!);
 
     // user may tab or arrow down to the current day (or some other element in the popper)
-    const today = div.querySelector<HTMLElement>(
-      ".react-datepicker__day--today",
-    );
+    const today = safeQuerySelector(div, ".react-datepicker__day--today");
     act(() => {
-      today?.focus();
+      today.focus();
     });
 
     // user hits Enter
-    fireEvent.keyDown(today ?? new HTMLElement(), getKey(KeyType.Enter));
+    fireEvent.keyDown(today, getKey(KeyType.Enter));
 
     expect(instance!.calendar).toBeTruthy();
 
@@ -334,14 +330,15 @@ describe("DatePicker", () => {
         onBlur={onBlurSpy}
       />,
     );
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     const focusSpy = jest.spyOn(input, "focus");
 
     fireEvent.focus(input);
 
-    const yearSelect =
-      container.querySelector(".react-datepicker__year-select") ??
-      new HTMLElement();
+    const yearSelect = safeQuerySelector(
+      container,
+      ".react-datepicker__year-select",
+    );
     fireEvent.blur(input);
     fireEvent.focus(yearSelect);
 
@@ -358,12 +355,13 @@ describe("DatePicker", () => {
         onYearChange={onYearChangeSpy}
       />,
     );
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.click(input);
 
-    const yearSelect =
-      container.querySelector(".react-datepicker__year-select") ??
-      new HTMLElement();
+    const yearSelect = safeQuerySelector(
+      container,
+      ".react-datepicker__year-select",
+    );
     fireEvent.change(yearSelect, {
       target: {
         value: Array.from(yearSelect.querySelectorAll("option")).at(-2)?.value,
@@ -374,7 +372,7 @@ describe("DatePicker", () => {
 
   it("should keep the calendar shown when clicking the calendar", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.focus(input);
     fireEvent.click(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
@@ -382,31 +380,33 @@ describe("DatePicker", () => {
 
   it("should not set open state when it is disabled and gets clicked.", () => {
     const { container } = render(<DatePicker disabled />);
-    fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.click(input);
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
 
   it("should not set open state when it is readOnly and gets clicked", () => {
     const { container } = render(<DatePicker readOnly />);
-    fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.click(input);
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
 
   it("should hide the calendar when clicking a day on the calendar", () => {
     const { container } = render(<DatePicker />);
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
-    fireEvent.click(
-      container.querySelector(".react-datepicker__day") ?? new HTMLElement(),
-    );
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
+    const day = safeQuerySelector(container, ".react-datepicker__day");
+    fireEvent.click(day);
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
 
   it("should not hide the calendar when clicking a day on the calendar and shouldCloseOnSelect prop is false", () => {
     const { container } = render(<DatePicker shouldCloseOnSelect={false} />);
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
-    fireEvent.click(
-      container.querySelector(".react-datepicker__day") ?? new HTMLElement(),
-    );
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
+    const day = safeQuerySelector(container, ".react-datepicker__day");
+    fireEvent.click(day);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
   });
 
@@ -418,19 +418,18 @@ describe("DatePicker", () => {
     });
 
     // user focuses the input field, the calendar opens
-    const dateInput = div.querySelector("input") ?? new HTMLElement();
+    const dateInput = safeQuerySelector(div, "input");
     fireEvent.focus(dateInput);
 
     // user may tab or arrow down to the current day (or some other element in the popper)
-    const today = div.querySelector<HTMLElement>(
-      ".react-datepicker__day--today",
-    );
+
+    const today = safeQuerySelector(div, ".react-datepicker__day--today");
     act(() => {
       today?.focus();
     });
 
     // user hits Enter
-    fireEvent.keyDown(today ?? new HTMLElement(), getKey(KeyType.Enter));
+    fireEvent.keyDown(today, getKey(KeyType.Enter));
     expect(document.activeElement).toBe(today);
   });
 
@@ -538,7 +537,7 @@ describe("DatePicker", () => {
 
   it("should hide the calendar when pressing enter in the date input", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.focus(input);
     fireEvent.keyDown(input, getKey(KeyType.Enter));
     expect(container.querySelector(".react-datepicker")).toBeNull();
@@ -546,7 +545,7 @@ describe("DatePicker", () => {
 
   it("should hide the calendar when the pressing escape in the date input", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.focus(input);
     fireEvent.keyDown(input, getKey(KeyType.Escape));
     expect(container.querySelector(".react-datepicker")).toBeNull();
@@ -590,7 +589,7 @@ describe("DatePicker", () => {
       onBlurSpy(event);
     };
     const { container } = render(<DatePicker onBlur={onBlur} />);
-    const input = container.querySelector("input") ?? new HTMLInputElement();
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
     onBlurSpy = jest.spyOn(input, "blur");
     fireEvent.focus(input);
     fireEvent.keyDown(input, getKey(KeyType.Tab, true));
@@ -600,7 +599,7 @@ describe("DatePicker", () => {
 
   it("should not apply the react-datepicker-ignore-onclickoutside class to the date input when closed", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input");
+    const input = safeQuerySelector(container, "input");
     expect(
       input?.classList.contains("react-datepicker-ignore-onclickoutside"),
     ).toBeFalsy();
@@ -608,8 +607,8 @@ describe("DatePicker", () => {
 
   it("should apply the react-datepicker-ignore-onclickoutside class to date input when open", () => {
     const { container } = render(<DatePicker />);
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
     expect(
       input?.classList.contains("react-datepicker-ignore-onclickoutside"),
     ).toBeTruthy();
@@ -624,10 +623,11 @@ describe("DatePicker", () => {
       />,
     );
 
-    const calendarIcon = container.querySelector(
+    const calendarIcon = safeQuerySelector(
+      container,
       "svg.react-datepicker__calendar-icon",
     );
-    fireEvent.click(calendarIcon ?? new HTMLElement());
+    fireEvent.click(calendarIcon);
 
     const reactCalendar = container.querySelector(
       "div.react-datepicker-popper .react-datepicker",
@@ -645,10 +645,11 @@ describe("DatePicker", () => {
       />,
     );
 
-    const calendarIcon = container.querySelector(
+    const calendarIcon = safeQuerySelector(
+      container,
       "svg.react-datepicker__calendar-icon",
     );
-    fireEvent.click(calendarIcon ?? new HTMLElement());
+    fireEvent.click(calendarIcon);
 
     const reactCalendar = container.querySelector(
       "div.react-datepicker-popper .react-datepicker",
@@ -681,12 +682,14 @@ describe("DatePicker", () => {
       />,
     );
 
-    let calendarIcon = container.querySelector(
+    let calendarIcon = safeQuerySelector(
+      container,
       "svg.react-datepicker__calendar-icon",
     );
-    fireEvent.click(calendarIcon ?? new HTMLElement());
+    fireEvent.click(calendarIcon);
 
-    calendarIcon = container.querySelector(
+    calendarIcon = safeQuerySelector(
+      container,
       "svg.react-datepicker__calendar-icon",
     );
 
@@ -782,10 +785,12 @@ describe("DatePicker", () => {
         onChange={handleChange}
       />,
     );
-    const clearButton = container.querySelector(
+
+    const clearButton = safeQuerySelector(
+      container,
       ".react-datepicker__close-icon",
     );
-    fireEvent.click(clearButton ?? new HTMLElement());
+    fireEvent.click(clearButton);
     expect(cleared).toBe(true);
   });
 
@@ -801,10 +806,12 @@ describe("DatePicker", () => {
       />,
     );
     expect(instance).toBeTruthy();
-    const clearButton = container.querySelector(
+
+    const clearButton = safeQuerySelector(
+      container,
       ".react-datepicker__close-icon",
     );
-    fireEvent.click(clearButton ?? new HTMLElement());
+    fireEvent.click(clearButton);
     expect(instance!.state.inputValue).toBeNull();
   });
 
@@ -835,10 +842,11 @@ describe("DatePicker", () => {
       },
     );
 
-    const clearButton = container.querySelector(
+    const clearButton = safeQuerySelector(
+      container,
       ".react-datepicker__close-icon",
     );
-    fireEvent.click(clearButton ?? new HTMLElement());
+    fireEvent.click(clearButton);
 
     await waitFor(() => {
       expect(document.activeElement).toBe(div.querySelector("input"));
@@ -888,8 +896,9 @@ describe("DatePicker", () => {
         }}
       />,
     );
-    const dayButton = container.querySelector(".react-datepicker__day");
-    fireEvent.click(dayButton ?? new HTMLElement());
+
+    const dayButton = safeQuerySelector(container, ".react-datepicker__day");
+    fireEvent.click(dayButton);
 
     expect(date).toBeTruthy();
     expect(getHours(date!)).toBe(10);
@@ -909,8 +918,8 @@ describe("DatePicker", () => {
         }}
       />,
     );
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLInputElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: {
         value: newDate("2014-01-02"),
       },
@@ -986,7 +995,8 @@ describe("DatePicker", () => {
   it("should render Calendar in portal when withPortal is set and input has focus", () => {
     const { container } = render(<DatePicker withPortal />);
 
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
 
     expect(
       document.body.querySelector(".react-datepicker__portal"),
@@ -1037,7 +1047,8 @@ describe("DatePicker", () => {
       <DatePicker withPortal portalId="portal-id-dom-test" />,
     );
 
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
 
     expect(document.body.querySelector("#portal-id-dom-test")).not.toBeNull();
   });
@@ -1687,9 +1698,8 @@ describe("DatePicker", () => {
 
     it("should auto update calendar when the updated date text is after props.minDate", () => {
       const { container } = getCalendar();
-      const input = container.querySelector("input");
-
-      fireEvent.change(input ?? new HTMLElement(), {
+      const input = safeQuerySelector<HTMLInputElement>(container, "input");
+      fireEvent.change(input, {
         target: {
           value: "1801/01/01",
         },
@@ -1703,9 +1713,9 @@ describe("DatePicker", () => {
 
     it("should not auto update calendar when the updated date text is before props.minDate", () => {
       const { container } = getCalendar();
-      const input = container.querySelector("input");
+      const input = safeQuerySelector<HTMLInputElement>(container, "input");
 
-      fireEvent.change(input ?? new HTMLElement(), {
+      fireEvent.change(input, {
         target: {
           value: "1799/01/01",
         },
@@ -1895,7 +1905,7 @@ describe("DatePicker", () => {
     });
 
     // user focuses the input field, the calendar opens
-    const dateInput = div.querySelector("input") ?? new HTMLElement();
+    const dateInput = safeQuerySelector(div, "input");
     fireEvent.focus(dateInput);
     fireEvent.keyDown(dateInput, getKey(KeyType.ArrowDown));
 
@@ -2058,8 +2068,8 @@ describe("DatePicker", () => {
     const { container } = render(
       <DatePicker selected={newDate("2016-11-22")} onChange={handleChange} />,
     );
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector(container, "input");
+    fireEvent.change(input, {
       target: {
         value: "",
       },
@@ -2174,8 +2184,8 @@ describe("DatePicker", () => {
     );
     expect(onChangeRawSpy).not.toHaveBeenCalled();
     expect(onSelectSpy).not.toHaveBeenCalled();
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector(container, "input");
+    fireEvent.change(input, {
       target: {
         value: inputValue,
       },
@@ -2197,10 +2207,10 @@ describe("DatePicker", () => {
     );
     expect(onChangeRawSpy).not.toHaveBeenCalled();
     expect(onSelectSpy).not.toHaveBeenCalled();
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
-    const day = container.querySelector(".react-datepicker__day");
-    fireEvent.click(day ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
+    const day = safeQuerySelector(container, ".react-datepicker__day");
+    fireEvent.click(day);
     expect(onChangeRawSpy).toHaveBeenCalledTimes(1);
     expect(onSelectSpy).toHaveBeenCalledTimes(1);
   });
@@ -2212,7 +2222,7 @@ describe("DatePicker", () => {
       (event.target as unknown as HTMLInputElement).value > "2" &&
       event.preventDefault();
     const { container } = render(<DatePicker onChangeRaw={onChangeRaw} />);
-    const input = container.querySelector("input") ?? new HTMLInputElement();
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
     expect(input.value).toBe("");
     fireEvent.change(input, {
       target: {
@@ -2239,8 +2249,8 @@ describe("DatePicker", () => {
       />,
     );
     expect(onChangeRawSpy).not.toHaveBeenCalled();
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector(container, "input");
+    fireEvent.change(input, {
       target: {
         value: inputValue,
       },
@@ -2264,8 +2274,8 @@ describe("DatePicker", () => {
       />,
     );
     expect(onChangeRawSpy).not.toHaveBeenCalled();
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector(container, "input");
+    fireEvent.change(input, {
       target: {
         value: inputValue,
       },
@@ -2303,11 +2313,15 @@ describe("DatePicker", () => {
       </div>,
     );
     expect(container.querySelector(".react-datepicker")).toBeNull();
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
+
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
-    fireEvent.mouseDown(
-      container.querySelector(".testText") ?? new HTMLElement(),
-    );
+
+    const testText = safeQuerySelector(container, ".testText");
+    fireEvent.mouseDown(testText);
+
     expect(container.querySelector(".react-datepicker")).toBeNull();
     expect(onClickOutsideSpy).toHaveBeenCalledTimes(1);
   });
@@ -2318,9 +2332,11 @@ describe("DatePicker", () => {
       <DatePicker onClickOutside={onClickOutsideSpy} />,
     );
     expect(container.querySelector(".react-datepicker")).toBeNull();
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
-    fireEvent.mouseDown(container.querySelector("input") ?? new HTMLElement());
+
+    fireEvent.mouseDown(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
     expect(onClickOutsideSpy).not.toHaveBeenCalled();
   });
@@ -2513,15 +2529,16 @@ describe("DatePicker", () => {
   });
   it("should not set open state when focusing on the date input and the preventOpenOnFocus prop is set", () => {
     const { container } = render(<DatePicker preventOpenOnFocus />);
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
   it("should not set open state onInputKeyDown when preventOpenOnFocus prop is set", () => {
     const { container } = render(<DatePicker preventOpenOnFocus />);
-    fireEvent.keyDown(
-      container.querySelector("input") ?? new HTMLElement(),
-      getKey(KeyType.ArrowLeft),
-    );
+
+    const input = safeQuerySelector(container, "input");
+    fireEvent.keyDown(input, getKey(KeyType.ArrowLeft));
+
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
   it("should clear the input when clear() member function is called", () => {
@@ -2543,7 +2560,8 @@ describe("DatePicker", () => {
   });
   it("should not open when open is false and input is focused", () => {
     const { container } = render(<DatePicker open={false} />);
-    fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).toBeNull();
   });
   it("should open when open is true", () => {
@@ -2553,7 +2571,8 @@ describe("DatePicker", () => {
   it("should fire onInputClick when input is clicked", () => {
     const onInputClickSpy = jest.fn();
     const { container } = render(<DatePicker onInputClick={onInputClickSpy} />);
-    fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.click(input);
     expect(onInputClickSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -2612,8 +2631,8 @@ describe("DatePicker", () => {
 
   it("should show the popper arrow when showPopperArrow is true", () => {
     const { container } = render(<DatePicker showPopperArrow />);
-    const input = container.querySelector("input");
-    fireEvent.click(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.click(input);
 
     const arrow = container.querySelector(".react-datepicker__triangle");
 
@@ -2622,8 +2641,8 @@ describe("DatePicker", () => {
 
   it("should not show the popper arrow when showPopperArrow is false", () => {
     const { container } = render(<DatePicker showPopperArrow={false} />);
-    const input = container.querySelector("input");
-    fireEvent.click(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.click(input);
 
     const arrows = container.querySelectorAll(".react-datepicker__triangle");
 
@@ -2694,8 +2713,8 @@ describe("DatePicker", () => {
 
   it("should close the calendar after scrolling", () => {
     const { container } = render(<DatePicker closeOnScroll />);
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
     fireEvent.scroll(document);
     expect(container.querySelector(".react-datepicker")).toBeNull();
@@ -2707,8 +2726,8 @@ describe("DatePicker", () => {
     const { container } = render(<DatePicker closeOnScroll />, {
       container: div,
     });
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     fireEvent.scroll(div);
 
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
@@ -2716,8 +2735,8 @@ describe("DatePicker", () => {
 
   it("should close the calendar after scrolling.", () => {
     const { container } = render(<DatePicker closeOnScroll={() => true} />);
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
     fireEvent.scroll(document);
     expect(container.querySelector(".react-datepicker")).toBeNull();
@@ -2725,8 +2744,8 @@ describe("DatePicker", () => {
 
   it("should not close the calendar after scrolling.", () => {
     const { container } = render(<DatePicker closeOnScroll={() => false} />);
-    const input = container.querySelector("input");
-    fireEvent.focus(input ?? new HTMLElement());
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
     fireEvent.scroll(document);
     expect(container.querySelector(".react-datepicker")).not.toBeNull();
   });
@@ -2753,7 +2772,8 @@ describe("DatePicker", () => {
           onChange={onChange}
         />,
       );
-      fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+      const input = safeQuerySelector(container, "input");
+      fireEvent.focus(input);
 
       const days = container.querySelectorAll(".react-datepicker__day");
 
@@ -2775,7 +2795,10 @@ describe("DatePicker", () => {
           onChange={onChange}
         />,
       );
-      fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+
+      const input = safeQuerySelector(container, "input");
+      fireEvent.focus(input);
+
       const days = container.querySelectorAll(".react-datepicker__day");
 
       expect(days[5]).toBeTruthy();
@@ -2797,7 +2820,10 @@ describe("DatePicker", () => {
           onChange={onChange}
         />,
       );
-      fireEvent.focus(container.querySelector("input") ?? new HTMLElement());
+
+      const input = safeQuerySelector(container, "input");
+      fireEvent.focus(input);
+
       const days = container.querySelectorAll(".react-datepicker__day");
 
       expect(days[5]).toBeTruthy();
@@ -2830,8 +2856,11 @@ describe("DatePicker", () => {
         />,
       );
 
-      const day = container.querySelector(".react-datepicker__day--selected");
-      fireEvent.click(day ?? new HTMLElement());
+      const selectedDay = safeQuerySelector(
+        container,
+        ".react-datepicker__day--selected",
+      );
+      fireEvent.click(selectedDay);
       expect(startDate).toBeTruthy();
       expect(formatDate(startDate!, "yyyy-MM-dd")).toBe(
         formatDate(selected, "yyyy-MM-dd"),
@@ -2858,10 +2887,11 @@ describe("DatePicker", () => {
         />,
       );
 
-      const day = container.querySelector(
+      const day = safeQuerySelector(
+        container,
         ".react-datepicker__day--selected + .react-datepicker__day",
       );
-      fireEvent.click(day ?? new HTMLElement());
+      fireEvent.click(day);
       expect(formatDate(startDate, "yyyy-MM-dd")).toBe(
         formatDate(startDate, "yyyy-MM-dd"),
       );
@@ -2892,8 +2922,11 @@ describe("DatePicker", () => {
         />,
       );
 
-      const day = container.querySelector(".react-datepicker__day--selected");
-      fireEvent.click(day ?? new HTMLElement());
+      const day = safeQuerySelector(
+        container,
+        ".react-datepicker__day--selected",
+      );
+      fireEvent.click(day);
       expect(formatDate(startDate, "yyyy-MM-dd")).toBe(
         formatDate(selected, "yyyy-MM-dd"),
       );
@@ -3008,10 +3041,15 @@ describe("DatePicker", () => {
       const { container } = render(
         <DatePicker selectsRange startDate={startDate} endDate={endDate} />,
       );
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
-      fireEvent.click(
-        container.querySelector(".react-datepicker__day") ?? new HTMLElement(),
+
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
+
+      const datePickerDay = safeQuerySelector(
+        container,
+        ".react-datepicker__day",
       );
+      fireEvent.click(datePickerDay);
 
       expect(container.querySelector(".react-datepicker")).not.toBeNull();
     });
@@ -3022,7 +3060,9 @@ describe("DatePicker", () => {
       const { container } = render(
         <DatePicker selectsRange startDate={startDate} endDate={endDate} />,
       );
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
 
       const days = container.querySelectorAll(".react-datepicker__day");
       const day = days[Math.floor(days.length / 2)];
@@ -3042,7 +3082,9 @@ describe("DatePicker", () => {
           endDate={endDate}
         />,
       );
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
 
       const days = container.querySelectorAll(".react-datepicker__day");
       const day = days[Math.floor(days.length / 2)];
@@ -3113,9 +3155,9 @@ describe("DatePicker", () => {
         />,
       );
 
-      const input = container.querySelector("input");
+      const input = safeQuerySelector(container, "input");
       expect(input).toBeTruthy();
-      fireEvent.click(input ?? new HTMLElement());
+      fireEvent.click(input);
 
       const calendar = container.querySelector(".react-datepicker");
       expect(calendar).toBeTruthy();
@@ -3124,10 +3166,11 @@ describe("DatePicker", () => {
       const startDatePrefixedWithZeros = formatDayWithZeros(
         startDate.getDate(),
       );
-      const endDateElement = container.querySelector(
+      const endDateElement = safeQuerySelector(
+        container,
         `.react-datepicker__day--${startDatePrefixedWithZeros}`,
       );
-      fireEvent.click(endDateElement ?? new HTMLElement());
+      fireEvent.click(endDateElement);
 
       expect(onChangeSpy).toHaveBeenCalled();
     });
@@ -3155,7 +3198,7 @@ describe("DatePicker", () => {
         />,
       );
 
-      const input = container.querySelector("input");
+      const input = safeQuerySelector(container, "input");
       expect(input).toBeTruthy();
       fireEvent.click(input!);
 
@@ -3166,10 +3209,12 @@ describe("DatePicker", () => {
       const startDatePrefixedWithZeros = formatDayWithZeros(
         startDate.getDate(),
       );
-      const endDateElement = container.querySelector(
+
+      const endDateElement = safeQuerySelector(
+        container,
         `.react-datepicker__day--${startDatePrefixedWithZeros}`,
       );
-      fireEvent.click(endDateElement ?? new HTMLElement());
+      fireEvent.click(endDateElement);
 
       calendar = container.querySelector(".react-datepicker");
       expect(calendar).toBeFalsy();
@@ -3186,7 +3231,8 @@ describe("DatePicker", () => {
       const { container, rerender } = render(
         <DatePicker monthsShown={2} selected={selected} />,
       );
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
       const months = container.querySelectorAll(".react-datepicker__month");
       expect(months).toHaveLength(2);
       // 2023-05 monthShowsDuplicateDaysEnd:true
@@ -3206,7 +3252,7 @@ describe("DatePicker", () => {
 
       // moreThanTwoMonths
       rerender(<DatePicker monthsShown={4} selected={selected} />);
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+      fireEvent.click(input);
       const monthsMore = container.querySelectorAll(".react-datepicker__month");
       expect(monthsMore).toHaveLength(4);
       // 2023-05 monthShowsDuplicateDaysEnd:true
@@ -3244,7 +3290,8 @@ describe("DatePicker", () => {
       const { container, rerender } = render(
         <DatePicker monthsShown={2} selected={selected} />,
       );
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
       const months = container.querySelectorAll(".react-datepicker__month");
       expect(months).toHaveLength(2);
 
@@ -3261,7 +3308,7 @@ describe("DatePicker", () => {
 
       // moreThanTwoMonths
       rerender(<DatePicker monthsShown={4} selected={selected} />);
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+      fireEvent.click(input);
       const monthsMore = container.querySelectorAll(".react-datepicker__month");
       expect(monthsMore).toHaveLength(4);
       // 2023-05 monthShowsDuplicateDaysStart:false
@@ -3288,7 +3335,8 @@ describe("DatePicker", () => {
 
     it("should not find duplicates when single month displayed", () => {
       const { container } = render(<DatePicker selected={selected} />);
-      fireEvent.click(container.querySelector("input") ?? new HTMLElement());
+      const input = safeQuerySelector(container, "input");
+      fireEvent.click(input);
       const months = container.querySelectorAll(".react-datepicker__month");
       expect(months).toHaveLength(1);
 
@@ -3476,7 +3524,7 @@ describe("DatePicker", () => {
     registerLocale("en-GB", enGB);
 
     const { container } = render(<DatePicker locale="en-GB" />);
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     jest.spyOn(input, "focus");
     fireEvent.focus(input);
 
@@ -3489,7 +3537,7 @@ describe("DatePicker", () => {
     registerLocale("en-US", enUS);
 
     const { container } = render(<DatePicker locale="en-US" />);
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     jest.spyOn(input, "focus");
     fireEvent.focus(input);
 
@@ -3518,7 +3566,7 @@ describe("DatePicker", () => {
         />,
       );
 
-      const input = container.querySelector("input") ?? new HTMLElement();
+      const input = safeQuerySelector(container, "input");
       fireEvent.change(input, {
         target: {
           value: "8:22 AM",
@@ -3547,9 +3595,10 @@ describe("DatePicker", () => {
       />,
     );
 
-    const input =
-      datepicker.querySelector(".react-datepicker__input-container > input") ??
-      new HTMLElement();
+    const input = safeQuerySelector(
+      datepicker,
+      ".react-datepicker__input-container > input",
+    );
     fireEvent.change(input, { target: { value: "" } });
 
     expect(date).toBe(null);
@@ -3573,9 +3622,10 @@ describe("DatePicker", () => {
       />,
     );
 
-    const input =
-      datepicker.querySelector(".react-datepicker__input-container > input") ??
-      new HTMLElement();
+    const input = safeQuerySelector(
+      datepicker,
+      ".react-datepicker__input-container > input",
+    );
     fireEvent.change(input, { target: { value: "" } });
 
     expect(date).toBe(null);
@@ -3594,7 +3644,7 @@ describe("DatePicker", () => {
       />,
     );
 
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.change(input, {
       target: {
         value: "11/2022",
@@ -3623,7 +3673,7 @@ describe("DatePicker", () => {
       />,
     );
 
-    const input = container.querySelector("input") ?? new HTMLElement();
+    const input = safeQuerySelector(container, "input");
     fireEvent.change(input, {
       target: {
         value: "2021",
@@ -3741,11 +3791,12 @@ describe("DatePicker", () => {
         />,
       );
 
-      const dateInput = container.querySelector("input");
-      fireEvent.focus(dateInput ?? new HTMLElement());
-      const selectedYear =
-        container.querySelector(".react-datepicker__year-text--selected") ??
-        new HTMLElement();
+      const dateInput = safeQuerySelector(container, "input");
+      fireEvent.focus(dateInput);
+      const selectedYear = safeQuerySelector(
+        container,
+        ".react-datepicker__year-text--selected",
+      );
 
       fireEvent.mouseEnter(selectedYear);
       fireEvent.mouseLeave(selectedYear);
@@ -3767,11 +3818,12 @@ describe("DatePicker", () => {
         />,
       );
 
-      const dateInput = container.querySelector("input");
-      fireEvent.focus(dateInput ?? new HTMLElement());
-      const selectedYear =
-        container.querySelector(".react-datepicker__year-text--selected") ??
-        new HTMLElement();
+      const dateInput = safeQuerySelector(container, "input");
+      fireEvent.focus(dateInput);
+      const selectedYear = safeQuerySelector(
+        container,
+        ".react-datepicker__year-text--selected",
+      );
 
       fireEvent.pointerEnter(selectedYear);
       fireEvent.pointerLeave(selectedYear);