Repository: Hacker0x01/react-datepicker
Pull request #4871 (2024-06-06 14:30:09)

[typescript-migration] move test and fix jest config
## Description
**Linked issue**: #4700

**Changes**
- move tests to src
- fix configs (ts, eslint, jest)
- Includes fixes that will serve as the basis for the migration of babel-jest to ts-jest.
- Includes code to be removed once the migration to ts-jest is complete.

## Screenshots
<!-- If applicable, add screenshots to help explain your improvements -->

## To reviewers
<!-- Additional comments for reviewers -->

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


yuki0410-dev: For some reason I cannot reproduce the CI Error locally...
codecov[bot]: ## [Codecov](https://app.codecov.io/gh/Hacker0x01/react-datepicker/pull/4871?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Hacker0x01) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 96.72%. Comparing base [(`6c8fd8e`)](https://app.codecov.io/gh/Hacker0x01/react-datepicker/commit/6c8fd8e8d3ce88cf88b3e3cfc58fca2215c57cbb?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Hacker0x01) to head [(`3136ae0`)](https://app.codecov.io/gh/Hacker0x01/react-datepicker/commit/3136ae049f5dc0b0ac14191b42e9847566cb2ebf?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Hacker0x01).

> :exclamation: **Current head 3136ae0 differs from pull request most recent head 1c54034**
> 
> Please [upload](https://docs.codecov.com/docs/codecov-uploader) reports for the commit 1c54034 to get more accurate results.


<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main    #4871   +/-   ##
=======================================
  Coverage   96.72%   96.72%           
=======================================
  Files          28       28           
  Lines        2990     2990           
  Branches     1290     1294    +4     
=======================================
  Hits         2892     2892           
  Misses         98       98           
```



</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/Hacker0x01/react-datepicker/pull/4871?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Hacker0x01).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Hacker0x01).


Patch:
diff --git a/.eslintrc.js b/.eslintrc.js
index 83425443..f18e35d8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,7 +14,7 @@ const config = {
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint", "import", "unused-imports"],
   parserOptions: {
-    project: ["./tsconfig.dev.json"],
+    project: ["./tsconfig.json"],
   },
   rules: {
     "no-unused-vars": "off", // Duplicate with unused-import/no-unused-vars
diff --git a/jest.config.js b/jest.config.js
index cde95439..fb773759 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,56 @@
+const babelTargetList = [
+  "helper_components/custom_input\\.tsx",
+  "calendar_test\\.test\\.tsx",
+  "datepicker_test\\.test\\.tsx",
+  "min_time_test\\.test\\.tsx",
+  "month_dropdown_test\\.test\\.tsx",
+  "month_test\\.test\\.tsx",
+  "month_year_dropdown_test\\.test\\.tsx",
+  "multi_month_test\\.test\\.tsx",
+  "multiple_selected_dates\\.test\\.tsx",
+  "week_number_test\\.test\\.tsx",
+];
+
+const tsTargetList = [
+  "helper_components/calendar_icon\\.tsx",
+  // "helper_components/custom_input\\.tsx",
+  "helper_components/custom_time_input\\.tsx",
+  "helper_components/test_wrapper\\.tsx",
+  "calendar_icon\\.test\\.tsx",
+  // "calendar_test\\.test\\.tsx",
+  "date_utils_test\\.test\\.ts",
+  // "datepicker_test\\.test\\.tsx",
+  "day_test\\.test\\.tsx",
+  "exclude_dates\\.test\\.tsx",
+  "exclude_time_period_test\\.test\\.tsx",
+  "exclude_times_test\\.test\\.tsx",
+  "filter_times_test\\.test\\.tsx",
+  "include_times_test\\.test\\.tsx",
+  "index\\.ts",
+  "inject_times_test\\.test\\.tsx",
+  // "min_time_test\\.test\\.tsx",
+  // "month_dropdown_test\\.test\\.tsx",
+  // "month_test\\.test\\.tsx",
+  // "month_year_dropdown_test\\.test\\.tsx",
+  // "multi_month_test\\.test\\.tsx",
+  // "multiple_selected_dates\\.test\\.tsx",
+  "run_axe\\.tsx",
+  "show_time_test\\.test\\.tsx",
+  "test_utils\\.ts",
+  "time_format_test\\.test\\.tsx",
+  "time_input_test\\.test\\.tsx",
+  "timepicker_test\\.test\\.tsx",
+  // "week_number_test\\.test\\.tsx",
+  "week_picker_test\\.test\\.tsx",
+  "week_test\\.test\\.tsx",
+  "year_dropdown_options_test\\.test\\.tsx",
+  "year_dropdown_test\\.test\\.tsx",
+  "year_picker_test\\.test\\.tsx",
+];
+
 module.exports = {
-  roots: ["./test"],
-  setupFilesAfterEnv: ["<rootDir>/test/index.ts"],
+  roots: ["./src/test"],
+  setupFilesAfterEnv: ["<rootDir>/src/test/index.ts"],
   testEnvironment: "jest-environment-jsdom",
   collectCoverage: true,
   coverageReporters: ["json", "lcov", "text", "clover"],
@@ -11,7 +61,26 @@ module.exports = {
   ],
   transformIgnorePatterns: ["/node_modules/(?!date-fns)"],
   transform: {
-    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    "^.+\\.(js|jsx)$": "babel-jest",
+    ...babelTargetList.reduce((prev, item) => {
+      return {
+        ...prev,
+        // [`^<rootDir>/src/test/${item}$`]: "babel-jest",
+        [`^.+/src/test/${item}$`]: "babel-jest",
+        // [`^<rootDir>/${item}$`]: "babel-jest",
+        // [`^.+/${item}$`]: "babel-jest",
+      };
+    }, {}),
+    ...tsTargetList.reduce((prev, item) => {
+      return {
+        ...prev,
+        // [`^<rootDir>/src/test/${item}$`]: "ts-jest",
+        [`^.+/src/test/${item}$`]: "ts-jest",
+        // [`^<rootDir>/${item}$`]: "ts-jest",
+        // [`^.+/${item}$`]: "ts-jest",
+      };
+    }, {}),
+    "^.+/src/(?!test/).*\\.(ts|tsx)$": "ts-jest",
     // TODO: use it after the migration
     // "^.+\\.ts?$": "ts-jest",
     "node_modules/(?!date-fns/.*)": "ts-jest",
diff --git a/package.json b/package.json
index 0b8189c8..8773af10 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "license": "MIT",
   "homepage": "https://github.com/Hacker0x01/react-datepicker",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "browser": "dist/react-datepicker.min.js",
   "module": "dist/es/index.js",
   "unpkg": "dist/react-datepicker.min.js",
@@ -86,7 +87,7 @@
     "react-onclickoutside": "^6.13.0"
   },
   "scripts": {
-    "eslint": "eslint --ext .js,.jsx,.ts,.tsx src test",
+    "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
     "precommit": "lint-staged --allow-empty",
     "sass-lint": "stylelint 'src/stylesheets/*.scss'",
     "lint": "yarn run eslint && yarn run sass-lint",
@@ -96,15 +97,14 @@
     "test": "NODE_ENV=test jest",
     "test:ci": "NODE_ENV=test jest --ci --coverage",
     "test:watch": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test jest --watch",
-    "build": "NODE_ENV=production yarn run build:src && NODE_ENV=production yarn run css:prod && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run css:dev && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run build:types",
-    "build-dev": "NODE_ENV=development yarn run js:dev && NODE_ENV=development yarn run css:dev && NODE_ENV=development yarn run css:modules:dev && NODE_ENV=production yarn run build:types",
+    "build": "NODE_ENV=production yarn run build:src && NODE_ENV=production yarn run css:prod && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run css:dev && NODE_ENV=production yarn run css:modules:dev",
+    "build-dev": "NODE_ENV=development yarn run js:dev && NODE_ENV=development yarn run css:dev && NODE_ENV=development yarn run css:modules:dev",
     "css:prod": "sass --style compressed src/stylesheets/datepicker.scss > dist/react-datepicker.min.css",
     "css:modules:prod": "sass --style compressed src/stylesheets/datepicker-cssmodules.scss | tee dist/react-datepicker-cssmodules.min.css dist/react-datepicker-min.module.css",
     "css:dev": "sass --style expanded src/stylesheets/datepicker.scss > dist/react-datepicker.css",
     "css:modules:dev": "sass --style expanded src/stylesheets/datepicker-cssmodules.scss | tee dist/react-datepicker-cssmodules.css dist/react-datepicker.module.css",
-    "type-check": "tsc --noEmit",
+    "type-check": "tsc --project tsconfig.build.json --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "build:types": "tsc --emitDeclarationOnly",
     "build:src": "rollup -c",
     "js:dev": "rollup -cw",
     "prepare": "husky install"
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 31b9e5c5..872cb788 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -13,9 +13,9 @@ import typescript from "@rollup/plugin-typescript";
 const pkg = JSON.parse(
   fs
     .readFileSync(
-      path.join(path.dirname(fileURLToPath(import.meta.url)), "package.json")
+      path.join(path.dirname(fileURLToPath(import.meta.url)), "package.json"),
     )
-    .toString()
+    .toString(),
 );
 
 const banner = `/*!
@@ -33,10 +33,10 @@ const dateFnsPackageJson = JSON.parse(
     .readFileSync(
       path.join(
         path.dirname(fileURLToPath(import.meta.url)),
-        "node_modules/date-fns/package.json"
-      )
+        "node_modules/date-fns/package.json",
+      ),
     )
-    .toString()
+    .toString(),
 );
 const dateFnsSubpackages = Object.keys(dateFnsPackageJson.exports)
   .map((key) => key.replace("./", ""))
@@ -101,7 +101,7 @@ const config = {
     babel(),
     commonjs(),
     typescript({
-      tsconfig: "./tsconfig.json",
+      tsconfig: "./tsconfig.build.json",
       declaration: true,
       declarationDir: "dist",
     }),
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 00000000..8caab2a9
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "es5"
+  },
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "dist", "src/test/**/*"]
+}
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
deleted file mode 100644
index 63fd9d48..00000000
--- a/tsconfig.dev.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["test/**/*"]
-}
diff --git a/tsconfig.json b/tsconfig.json
index 2eb61d0d..7bc5c097 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,12 +4,11 @@
     "noFallthroughCasesInSwitch": true,
     "noUnusedParameters": true,
     "noUnusedLocals": true,
-    "declarationDir": "dist/types",
     "declaration": true,
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "module": "esnext",
-    "target": "es5",
+    "target": "ES2015",
     "lib": ["ES2021", "dom"],
     "sourceMap": true,
     "jsx": "react",
@@ -21,7 +20,8 @@
     "strictNullChecks": true,
     "esModuleInterop": true,
     "baseUrl": "src/",
-    "typeRoots": ["./src/@types"]
+    "typeRoots": ["./src/@types", "./node_modules/@types"],
+    "types": ["node", "jest"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]


Test patch:
diff --git a/test/calendar_icon.test.tsx b/src/test/calendar_icon.test.tsx
similarity index 97%
rename from test/calendar_icon.test.tsx
rename to src/test/calendar_icon.test.tsx
index 3aadbc56..27f5c241 100644
--- a/test/calendar_icon.test.tsx
+++ b/src/test/calendar_icon.test.tsx
@@ -1,12 +1,12 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import CalendarIcon from "../src/calendar_icon";
+import CalendarIcon from "../calendar_icon";
 
 import { IconParkSolidApplication } from "./helper_components/calendar_icon";
 
 describe("CalendarIcon", () => {
-  let onClickMock;
+  let onClickMock: jest.Mock;
   beforeEach(() => {
     onClickMock = jest.fn();
   });
diff --git a/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx
similarity index 99%
rename from test/calendar_test.test.tsx
rename to src/test/calendar_test.test.tsx
index 6588890c..b80d29af 100644
--- a/test/calendar_test.test.tsx
+++ b/src/test/calendar_test.test.tsx
@@ -9,7 +9,7 @@ import { eo } from "date-fns/locale/eo";
 import { fi } from "date-fns/locale/fi";
 import React from "react";
 
-import Calendar from "../src/calendar";
+import Calendar from "../calendar";
 import {
   KeyType,
   getMonthInLocale,
@@ -28,12 +28,12 @@ import {
   isSameDay,
   subMonths,
   subYears,
-} from "../src/date_utils";
-import DatePicker from "../src/index";
+} from "../date_utils";
+import DatePicker from "../index";
 
 import { getKey } from "./test_utils";
 
-import type { Locale } from "../src/date_utils";
+import type { Locale } from "../date_utils";
 import type { Day } from "date-fns";
 
 // TODO Possibly rename
diff --git a/test/date_utils_test.test.ts b/src/test/date_utils_test.test.ts
similarity index 98%
rename from test/date_utils_test.test.ts
rename to src/test/date_utils_test.test.ts
index 69bf837c..a3d5c251 100644
--- a/test/date_utils_test.test.ts
+++ b/src/test/date_utils_test.test.ts
@@ -51,7 +51,7 @@ import {
   getMidnightDate,
   registerLocale,
   isMonthYearDisabled,
-} from "../src/date_utils";
+} from "../date_utils";
 
 registerLocale("pt-BR", ptBR);
 
@@ -318,20 +318,20 @@ describe("date_utils", () => {
 
     it("should be enabled if date filter returns true", () => {
       const day = newDate();
-      const filterDate = (d) => isEqual(d, day);
+      const filterDate = (d: Date) => isEqual(d, day);
       expect(isDayDisabled(day, { filterDate })).toBe(false);
     });
 
     it("should be disabled if date filter returns false", () => {
       const day = newDate();
-      const filterDate = (d) => !isEqual(d, day);
+      const filterDate = (d: Date) => !isEqual(d, day);
       expect(isDayDisabled(day, { filterDate })).toBe(true);
     });
 
     it("should not allow date filter to modify input date", () => {
       const day = newDate();
       const dayClone = newDate(day);
-      const filterDate = (d) => {
+      const filterDate = (d: Date) => {
         addDays(d, 1);
         return true;
       };
@@ -456,20 +456,20 @@ describe("date_utils", () => {
 
     it("should be enabled if date filter returns true", () => {
       const day = newDate();
-      const filterDate = (d) => isEqual(d, day);
+      const filterDate = (d: Date) => isEqual(d, day);
       expect(isMonthDisabled(day, { filterDate })).toBe(false);
     });
 
     it("should be disabled if date filter returns false", () => {
       const day = newDate();
-      const filterDate = (d) => !isEqual(d, day);
+      const filterDate = (d: Date) => !isEqual(d, day);
       expect(isMonthDisabled(day, { filterDate })).toBe(true);
     });
 
     it("should not allow date filter to modify input date", () => {
       const day = newDate();
       const dayClone = newDate(day);
-      const filterDate = (d) => {
+      const filterDate = (d: Date) => {
         addDays(d, 40);
         return true;
       };
@@ -540,20 +540,20 @@ describe("date_utils", () => {
 
     it("should be enabled if date filter returns true", () => {
       const day = newDate();
-      const filterDate = (d) => isEqual(d, day);
+      const filterDate = (d: Date) => isEqual(d, day);
       expect(isQuarterDisabled(day, { filterDate })).toBe(false);
     });
 
     it("should be disabled if date filter returns false", () => {
       const day = newDate();
-      const filterDate = (d) => !isEqual(d, day);
+      const filterDate = (d: Date) => !isEqual(d, day);
       expect(isQuarterDisabled(day, { filterDate })).toBe(true);
     });
 
     it("should not allow date filter to modify input date", () => {
       const day = newDate();
       const dayClone = newDate(day);
-      const filterDate = (d) => {
+      const filterDate = (d: Date) => {
         addDays(d, 40);
         return true;
       };
@@ -605,12 +605,12 @@ describe("date_utils", () => {
     });
 
     it("should be enabled if date filter returns true", () => {
-      const filterDate = (d) => isSameYear(d, newYearsDay);
+      const filterDate = (d: Date) => isSameYear(d, newYearsDay);
       expect(isYearDisabled(year, { filterDate })).toBe(false);
     });
 
     it("should be disabled if date filter returns false", () => {
-      const filterDate = (d) => !isSameYear(d, newYearsDay);
+      const filterDate = (d: Date) => !isSameYear(d, newYearsDay);
       expect(isYearDisabled(year, { filterDate })).toBe(true);
     });
   });
@@ -868,14 +868,14 @@ describe("date_utils", () => {
     it("should be enabled if time filter returns true", () => {
       const date = newDate();
       const time = setHours(setMinutes(date, 30), 1);
-      const filterTime = (t) => isEqual(t, time);
+      const filterTime = (t: Date) => isEqual(t, time);
       expect(isTimeDisabled(time, { filterTime })).toBe(false);
     });
 
     it("should be disabled if time filter returns false", () => {
       const date = newDate();
       const time = setHours(setMinutes(date, 30), 1);
-      const filterTime = (t) => !isEqual(t, time);
+      const filterTime = (t: Date) => !isEqual(t, time);
       expect(isTimeDisabled(time, { filterTime })).toBe(true);
     });
 
@@ -883,7 +883,7 @@ describe("date_utils", () => {
       const date = newDate();
       const time = setHours(setMinutes(date, 30), 1);
       const timeClone = newDate(time);
-      const filterTime = (t) => {
+      const filterTime = (t: Date) => {
         addHours(t, 1);
         return true;
       };
diff --git a/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
similarity index 99%
rename from test/datepicker_test.test.tsx
rename to src/test/datepicker_test.test.tsx
index e36f45ef..b1f950a0 100644
--- a/test/datepicker_test.test.tsx
+++ b/src/test/datepicker_test.test.tsx
@@ -22,8 +22,8 @@ import {
   subMonths,
   subWeeks,
   subYears,
-} from "../src/date_utils";
-import DatePicker, { registerLocale } from "../src/index";
+} from "../date_utils";
+import DatePicker, { registerLocale } from "../index";
 
 import CustomInput from "./helper_components/custom_input";
 import TestWrapper from "./helper_components/test_wrapper";
diff --git a/test/day_test.test.tsx b/src/test/day_test.test.tsx
similarity index 98%
rename from test/day_test.test.tsx
rename to src/test/day_test.test.tsx
index 4461ff07..07c347a6 100644
--- a/test/day_test.test.tsx
+++ b/src/test/day_test.test.tsx
@@ -12,10 +12,10 @@ import {
   getHighLightDaysMap,
   getHolidaysMap,
   registerLocale,
-} from "../src/date_utils";
-import Day from "../src/day";
+} from "../date_utils";
+import Day from "../day";
 
-function renderDay(day, props = {}) {
+function renderDay(day: Date, props = {}) {
   return render(
     <Day day={day} month={0} handleOnKeyDown={() => {}} {...props} />,
   ).container;
@@ -46,7 +46,7 @@ describe("Day", () => {
 
     it("should render custom day contents", () => {
       const day = newDate();
-      function renderDayContents(day, date) {
+      function renderDayContents(_day: Date, date: Date) {
         const tooltipText = `Tooltip for date: ${date}`;
         return <span title={tooltipText}>{getDate(date)}</span>;
       }
@@ -57,14 +57,14 @@ describe("Day", () => {
 
   describe("selected", () => {
     const className = "react-datepicker__day--selected";
-    let day;
+    let day: Date;
 
     beforeEach(() => {
       day = newDate();
     });
 
     describe("if selected", () => {
-      let container;
+      let container: HTMLElement;
       beforeEach(() => {
         container = renderDay(day, { selected: day });
       });
@@ -81,7 +81,7 @@ describe("Day", () => {
         expect(
           container
             .querySelector(".react-datepicker__day")
-            .getAttribute("aria-selected"),
+            ?.getAttribute("aria-selected"),
         ).toBe("true");
       });
 
@@ -111,7 +111,7 @@ describe("Day", () => {
     });
 
     describe("if not selected", () => {
-      let container;
+      let container: HTMLElement;
       beforeEach(() => {
         const selected = addDays(day, 1);
         container = renderDay(day, { selected });
@@ -129,7 +129,7 @@ describe("Day", () => {
         expect(
           container
             .querySelector(".react-datepicker__day")
-            .getAttribute("aria-selected"),
+            ?.getAttribute("aria-selected"),
         ).toBe("false");
       });
     });
@@ -371,7 +371,7 @@ describe("Day", () => {
 
     it("should pass rendered days date to dayClassName func", () => {
       const day = newDate();
-      const dayClassNameFunc = (date) => {
+      const dayClassNameFunc = (date: Date) => {
         expect(date).toBe(day);
         return className;
       };
@@ -495,7 +495,11 @@ describe("Day", () => {
       "react-datepicker__day--selecting-range-start";
     const rangeDayEndClassName = "react-datepicker__day--selecting-range-end";
 
-    function createDateRange(beforeDays, afterDays, day = newDate()) {
+    function createDateRange(
+      beforeDays: number,
+      afterDays: number,
+      day = newDate(),
+    ) {
       return {
         startDate: subDays(day, beforeDays),
         endDate: addDays(day, afterDays),
@@ -1191,7 +1195,7 @@ describe("Day", () => {
   });
 
   describe("click", () => {
-    let onClickCalled;
+    let onClickCalled: boolean;
 
     function onClick() {
       onClickCalled = true;
@@ -1303,7 +1307,11 @@ describe("Day", () => {
     const rangeDayStartClassName = "react-datepicker__day--range-start";
     const rangeDayEndClassName = "react-datepicker__day--range-end";
 
-    function createDateRange(beforeDays, afterDays, day = newDate()) {
+    function createDateRange(
+      beforeDays: number,
+      afterDays: number,
+      day = newDate(),
+    ) {
       return {
         startDate: subDays(day, beforeDays),
         endDate: addDays(day, afterDays),
@@ -1465,7 +1473,7 @@ describe("Day", () => {
 
     it("should apply focus to the preselected day", async () => {
       const day = newDate();
-      let instance;
+      let instance: Day | null = null;
       render(
         <Day
           ref={(node) => {
@@ -1479,20 +1487,20 @@ describe("Day", () => {
       );
 
       const focusSpy = jest
-        .spyOn(instance.dayEl.current, "focus")
+        .spyOn(instance!.dayEl.current!, "focus")
         .mockImplementation();
       Object.defineProperty(document, "activeElement", {
         value: undefined,
         writable: false,
       });
 
-      instance.componentDidMount();
+      instance!.componentDidMount();
       expect(focusSpy).toHaveBeenCalledTimes(1);
     });
 
     it("should not apply focus to the preselected day if inline", () => {
       const day = newDate();
-      let instance;
+      let instance: Day | null;
       render(
         <Day
           ref={(node) => {
@@ -1506,13 +1514,13 @@ describe("Day", () => {
         />,
       );
 
-      const focusSpy = jest.spyOn(instance.dayEl.current, "focus");
+      const focusSpy = jest.spyOn(instance!.dayEl.current!, "focus");
       Object.defineProperty(document, "activeElement", {
         value: undefined,
         writable: false,
       });
 
-      instance.componentDidMount();
+      instance!.componentDidMount();
       expect(focusSpy).not.toHaveBeenCalledTimes(1);
     });
   });
diff --git a/test/exclude_dates.test.tsx b/src/test/exclude_dates.test.tsx
similarity index 89%
rename from test/exclude_dates.test.tsx
rename to src/test/exclude_dates.test.tsx
index 1d3c332e..39a435be 100644
--- a/test/exclude_dates.test.tsx
+++ b/src/test/exclude_dates.test.tsx
@@ -2,7 +2,7 @@ import { render } from "@testing-library/react";
 import { subDays } from "date-fns";
 import React from "react";
 
-import DatePicker from "../src/index";
+import DatePicker from "../index";
 
 describe("DatePicker", () => {
   const excludeDates = [new Date(), subDays(new Date(), 1)];
@@ -40,10 +40,10 @@ describe("DatePicker", () => {
     );
 
     expect(disabledTimeItems.length).toBe(excludeDatesWithMessages.length);
-    expect(disabledTimeItems[0].getAttribute("title")).toBe(
+    expect(disabledTimeItems[0]?.getAttribute("title")).toBe(
       "This day is excluded",
     );
-    expect(disabledTimeItems[1].getAttribute("title")).toBe(
+    expect(disabledTimeItems[1]?.getAttribute("title")).toBe(
       "Today is excluded",
     );
   });
diff --git a/test/exclude_time_period_test.test.tsx b/src/test/exclude_time_period_test.test.tsx
similarity index 66%
rename from test/exclude_time_period_test.test.tsx
rename to src/test/exclude_time_period_test.test.tsx
index 1266657c..6531bf64 100644
--- a/test/exclude_time_period_test.test.tsx
+++ b/src/test/exclude_time_period_test.test.tsx
@@ -1,19 +1,19 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import DatePicker from "../src/index";
+import { newDate, setTime } from "../date_utils";
+import DatePicker from "../index";
 
 describe("DatePicker", () => {
   it("should only display times between minTime and maxTime", () => {
-    const now = utils.newDate();
+    const now = newDate();
     const { container } = render(
       <DatePicker
         showTimeSelect
         selected={now}
         onChange={() => null}
-        minTime={utils.setTime(now, { hour: 17, minute: 0 })}
-        maxTime={utils.setTime(now, { hour: 18, minute: 0 })}
+        minTime={setTime(now, { hour: 17, minute: 0 })}
+        maxTime={setTime(now, { hour: 18, minute: 0 })}
         open
       />,
     );
diff --git a/test/exclude_times_test.test.tsx b/src/test/exclude_times_test.test.tsx
similarity index 91%
rename from test/exclude_times_test.test.tsx
rename to src/test/exclude_times_test.test.tsx
index 7d91457b..69745a3e 100644
--- a/test/exclude_times_test.test.tsx
+++ b/src/test/exclude_times_test.test.tsx
@@ -1,11 +1,11 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import { setTime, newDate } from "../src/date_utils";
-import DatePicker from "../src/index";
+import { setTime, newDate } from "../date_utils";
+import DatePicker from "../index";
 
 describe("DatePicker", () => {
-  let now, excludeTimes;
+  let now: Date, excludeTimes: Date[];
 
   beforeEach(() => {
     now = newDate();
diff --git a/test/filter_times_test.test.tsx b/src/test/filter_times_test.test.tsx
similarity index 94%
rename from test/filter_times_test.test.tsx
rename to src/test/filter_times_test.test.tsx
index 1b0271a1..1724ba45 100644
--- a/test/filter_times_test.test.tsx
+++ b/src/test/filter_times_test.test.tsx
@@ -1,8 +1,8 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import { getHours } from "../src/date_utils";
-import TimeComponent from "../src/time";
+import { getHours } from "../date_utils";
+import TimeComponent from "../time";
 
 describe("TimeComponent", () => {
   const HOUR_TO_DISABLE_IN_12_HR = 5;
diff --git a/test/helper_components/calendar_icon.tsx b/src/test/helper_components/calendar_icon.tsx
similarity index 100%
rename from test/helper_components/calendar_icon.tsx
rename to src/test/helper_components/calendar_icon.tsx
diff --git a/test/helper_components/custom_input.tsx b/src/test/helper_components/custom_input.tsx
similarity index 100%
rename from test/helper_components/custom_input.tsx
rename to src/test/helper_components/custom_input.tsx
diff --git a/test/helper_components/custom_time_input.tsx b/src/test/helper_components/custom_time_input.tsx
similarity index 100%
rename from test/helper_components/custom_time_input.tsx
rename to src/test/helper_components/custom_time_input.tsx
diff --git a/test/helper_components/test_wrapper.tsx b/src/test/helper_components/test_wrapper.tsx
similarity index 100%
rename from test/helper_components/test_wrapper.tsx
rename to src/test/helper_components/test_wrapper.tsx
diff --git a/test/include_times_test.test.tsx b/src/test/include_times_test.test.tsx
similarity index 85%
rename from test/include_times_test.test.tsx
rename to src/test/include_times_test.test.tsx
index 1211c8db..65daddf1 100644
--- a/test/include_times_test.test.tsx
+++ b/src/test/include_times_test.test.tsx
@@ -1,18 +1,24 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import TimeComponent from "../src/time";
+import {
+  addHours,
+  addMinutes,
+  addSeconds,
+  getStartOfDay,
+  newDate,
+} from "../date_utils";
+import TimeComponent from "../time";
 
 describe("TimeComponent", () => {
-  let today, includeTimes;
+  let today: Date, includeTimes: Date[];
 
   beforeEach(() => {
-    today = utils.getStartOfDay(utils.newDate());
+    today = getStartOfDay(newDate());
     includeTimes = [
-      utils.addMinutes(today, 60),
-      utils.addMinutes(today, 120),
-      utils.addMinutes(today, 150),
+      addMinutes(today, 60),
+      addMinutes(today, 120),
+      addMinutes(today, 150),
     ];
   });
 
@@ -58,8 +64,8 @@ describe("TimeComponent", () => {
 
   it("should factor in seconds", () => {
     const includeHoursMinutesSeconds = [
-      utils.addHours(utils.addSeconds(today, 30), 1), //01:00:30
-      utils.addSeconds(today, 30), //00:00:30
+      addHours(addSeconds(today, 30), 1), //01:00:30
+      addSeconds(today, 30), //00:00:30
     ];
     const { container: timeComponent } = render(
       <TimeComponent
diff --git a/test/index.ts b/src/test/index.ts
similarity index 100%
rename from test/index.ts
rename to src/test/index.ts
diff --git a/test/inject_times_test.test.tsx b/src/test/inject_times_test.test.tsx
similarity index 67%
rename from test/inject_times_test.test.tsx
rename to src/test/inject_times_test.test.tsx
index 229ae7ce..945e1443 100644
--- a/test/inject_times_test.test.tsx
+++ b/src/test/inject_times_test.test.tsx
@@ -1,18 +1,24 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import TimeComponent from "../src/time";
+import {
+  addHours,
+  addMinutes,
+  addSeconds,
+  getStartOfDay,
+  newDate,
+} from "../date_utils";
+import TimeComponent from "../time";
 
 describe("TimeComponent", () => {
   it("should show times specified in injectTimes props", () => {
-    const today = utils.getStartOfDay(utils.newDate());
+    const today = getStartOfDay(newDate());
     const { container } = render(
       <TimeComponent
         injectTimes={[
-          utils.addMinutes(today, 1),
-          utils.addMinutes(today, 725),
-          utils.addMinutes(today, 1439),
+          addMinutes(today, 1),
+          addMinutes(today, 725),
+          addMinutes(today, 1439),
         ]}
       />,
     );
@@ -24,14 +30,14 @@ describe("TimeComponent", () => {
   });
 
   it("should not affect existing time intervals", () => {
-    const today = utils.getStartOfDay(utils.newDate());
+    const today = getStartOfDay(newDate());
     const { container } = render(
       <TimeComponent
         intervals={60}
         injectTimes={[
-          utils.addMinutes(today, 0),
-          utils.addMinutes(today, 60),
-          utils.addMinutes(today, 1440),
+          addMinutes(today, 0),
+          addMinutes(today, 60),
+          addMinutes(today, 1440),
         ]}
       />,
     );
@@ -43,14 +49,14 @@ describe("TimeComponent", () => {
   });
 
   it("should allow multiple injected times per interval", () => {
-    const today = utils.getStartOfDay(utils.newDate());
+    const today = getStartOfDay(newDate());
     const { container } = render(
       <TimeComponent
         intervals={60}
         injectTimes={[
-          utils.addMinutes(today, 1),
-          utils.addMinutes(today, 2),
-          utils.addMinutes(today, 3),
+          addMinutes(today, 1),
+          addMinutes(today, 2),
+          addMinutes(today, 3),
         ]}
       />,
     );
@@ -62,15 +68,15 @@ describe("TimeComponent", () => {
   });
 
   it("should sort injected times automatically", () => {
-    const today = utils.getStartOfDay(utils.newDate());
+    const today = getStartOfDay(newDate());
 
     const { container } = render(
       <TimeComponent
         intervals={60}
         injectTimes={[
-          utils.addMinutes(today, 3),
-          utils.addMinutes(today, 1),
-          utils.addMinutes(today, 2),
+          addMinutes(today, 3),
+          addMinutes(today, 1),
+          addMinutes(today, 2),
         ]}
       />,
     );
@@ -86,16 +92,16 @@ describe("TimeComponent", () => {
   });
 
   it("should support hours, minutes, and seconds", () => {
-    const today = utils.getStartOfDay(utils.newDate());
+    const today = getStartOfDay(newDate());
 
     const { container } = render(
       <TimeComponent
         format="HH:mm:ss"
         intervals={60}
         injectTimes={[
-          utils.addSeconds(today, 1),
-          utils.addMinutes(utils.addSeconds(today, 1), 30),
-          utils.addHours(utils.addMinutes(utils.addSeconds(today, 1), 30), 1),
+          addSeconds(today, 1),
+          addMinutes(addSeconds(today, 1), 30),
+          addHours(addMinutes(addSeconds(today, 1), 30), 1),
         ]}
       />,
     );
diff --git a/test/min_time_test.test.tsx b/src/test/min_time_test.test.tsx
similarity index 98%
rename from test/min_time_test.test.tsx
rename to src/test/min_time_test.test.tsx
index 12053944..5dcbef46 100644
--- a/test/min_time_test.test.tsx
+++ b/src/test/min_time_test.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render } from "@testing-library/react";
 import React, { useState } from "react";
 
-import DatePicker from "../src/index";
+import DatePicker from "../index";
 
 const DatePickerWithState = (props) => {
   const [selected, setSelected] = useState<Date | null>(null);
diff --git a/test/month_dropdown_test.test.tsx b/src/test/month_dropdown_test.test.tsx
similarity index 97%
rename from test/month_dropdown_test.test.tsx
rename to src/test/month_dropdown_test.test.tsx
index c745dfca..9debe347 100644
--- a/test/month_dropdown_test.test.tsx
+++ b/src/test/month_dropdown_test.test.tsx
@@ -6,9 +6,9 @@ import range from "lodash/range";
 import React from "react";
 import onClickOutside from "react-onclickoutside";
 
-import { getMonthInLocale, registerLocale } from "../src/date_utils";
-import MonthDropdown from "../src/month_dropdown";
-import MonthDropdownOptions from "../src/month_dropdown_options";
+import { getMonthInLocale, registerLocale } from "../date_utils";
+import MonthDropdown from "../month_dropdown";
+import MonthDropdownOptions from "../month_dropdown_options";
 
 describe("MonthDropdown", () => {
   let monthDropdown: HTMLElement | null = null;
diff --git a/test/month_test.test.tsx b/src/test/month_test.test.tsx
similarity index 99%
rename from test/month_test.test.tsx
rename to src/test/month_test.test.tsx
index d9be3216..03f91e78 100644
--- a/test/month_test.test.tsx
+++ b/src/test/month_test.test.tsx
@@ -4,9 +4,9 @@ import { es } from "date-fns/locale";
 import range from "lodash/range";
 import React from "react";
 
-import DatePicker from "../src";
-import * as utils from "../src/date_utils";
-import Month from "../src/month";
+import DatePicker from "../";
+import * as utils from "../date_utils";
+import Month from "../month";
 
 import { runAxe } from "./run_axe";
 import { getKey } from "./test_utils";
diff --git a/test/month_year_dropdown_test.test.tsx b/src/test/month_year_dropdown_test.test.tsx
similarity index 98%
rename from test/month_year_dropdown_test.test.tsx
rename to src/test/month_year_dropdown_test.test.tsx
index 7bbecb75..28712d31 100644
--- a/test/month_year_dropdown_test.test.tsx
+++ b/src/test/month_year_dropdown_test.test.tsx
@@ -10,9 +10,9 @@ import {
   formatDate,
   isAfter,
   registerLocale,
-} from "../src/date_utils";
-import MonthYearDropdown from "../src/month_year_dropdown";
-import MonthYearDropdownOptions from "../src/month_year_dropdown_options";
+} from "../date_utils";
+import MonthYearDropdown from "../month_year_dropdown";
+import MonthYearDropdownOptions from "../month_year_dropdown_options";
 
 describe("MonthYearDropdown", () => {
   let monthYearDropdown: HTMLElement | null = null;
diff --git a/test/multi_month_test.test.tsx b/src/test/multi_month_test.test.tsx
similarity index 94%
rename from test/multi_month_test.test.tsx
rename to src/test/multi_month_test.test.tsx
index 8f325e66..1bc3aec1 100644
--- a/test/multi_month_test.test.tsx
+++ b/src/test/multi_month_test.test.tsx
@@ -1,8 +1,8 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import Calendar from "../src/calendar";
-import * as utils from "../src/date_utils";
+import Calendar from "../calendar";
+import * as utils from "../date_utils";
 
 describe("Multi month calendar", function () {
   const dateFormat = "LLLL yyyy";
diff --git a/test/multiple_selected_dates.test.tsx b/src/test/multiple_selected_dates.test.tsx
similarity index 98%
rename from test/multiple_selected_dates.test.tsx
rename to src/test/multiple_selected_dates.test.tsx
index b1648c26..2032f3bc 100644
--- a/test/multiple_selected_dates.test.tsx
+++ b/src/test/multiple_selected_dates.test.tsx
@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import React from "react";
 
-import DatePicker from "../src";
+import DatePicker from "../";
 
 describe("Multiple Dates Selected", function () {
   function getDatePicker(extraProps) {
diff --git a/test/run_axe.tsx b/src/test/run_axe.tsx
similarity index 84%
rename from test/run_axe.tsx
rename to src/test/run_axe.tsx
index c79a1adf..25b119b9 100644
--- a/test/run_axe.tsx
+++ b/src/test/run_axe.tsx
@@ -3,7 +3,7 @@ import axe from "axe-core";
 const wrapper = document.createElement("main");
 document.body.appendChild(wrapper);
 
-export function runAxe(domNode) {
+export function runAxe(domNode: Node): Promise<void> {
   wrapper.appendChild(domNode);
   return axe
     .run(domNode)
diff --git a/test/show_time_test.test.tsx b/src/test/show_time_test.test.tsx
similarity index 90%
rename from test/show_time_test.test.tsx
rename to src/test/show_time_test.test.tsx
index 8784d83f..742cc7ab 100644
--- a/test/show_time_test.test.tsx
+++ b/src/test/show_time_test.test.tsx
@@ -1,8 +1,8 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import DatePicker from "../src/index";
-import TimeComponent from "../src/time";
+import DatePicker from "../index";
+import TimeComponent from "../time";
 
 describe("DatePicker", () => {
   it("should show time component when showTimeSelect prop is present", () => {
@@ -21,12 +21,12 @@ describe("DatePicker", () => {
   });
 
   describe("Time Select Only", () => {
-    let datePicker;
+    let datePicker: HTMLElement;
     beforeEach(() => {
       datePicker = render(
         <DatePicker showTimeSelect showTimeSelectOnly todayButton="Today" />,
       ).container;
-      fireEvent.click(datePicker.querySelector("input"));
+      fireEvent.click(datePicker.querySelector("input") ?? new HTMLElement());
     });
 
     it("should not show month container when showTimeSelectOnly prop is present", () => {
diff --git a/test/test_utils.ts b/src/test/test_utils.ts
similarity index 87%
rename from test/test_utils.ts
rename to src/test/test_utils.ts
index dbc625b5..2d366237 100644
--- a/test/test_utils.ts
+++ b/src/test/test_utils.ts
@@ -1,4 +1,4 @@
-import { KeyType } from "../src/date_utils";
+import { KeyType } from "../date_utils";
 
 interface KeyEvent {
   key: string;
@@ -57,3 +57,11 @@ export function getKey(key: KeyType, shiftKey = false) {
   }
   return { ...event, shiftKey };
 }
+
+export const range = (from: number, to: number): number[] => {
+  const list: number[] = [];
+  for (let i = from; i < to; i++) {
+    list.push(i);
+  }
+  return list;
+};
diff --git a/test/time_format_test.test.tsx b/src/test/time_format_test.test.tsx
similarity index 97%
rename from test/time_format_test.test.tsx
rename to src/test/time_format_test.test.tsx
index 643ffcb6..283accff 100644
--- a/test/time_format_test.test.tsx
+++ b/src/test/time_format_test.test.tsx
@@ -2,11 +2,11 @@ import { render, waitFor } from "@testing-library/react";
 import { ptBR } from "date-fns/locale/pt-BR";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import TimeComponent from "../src/time";
+import { registerLocale } from "../date_utils";
+import TimeComponent from "../time";
 
 describe("TimeComponent", () => {
-  utils.registerLocale("pt-BR", ptBR);
+  registerLocale("pt-BR", ptBR);
 
   beforeEach(() => {
     // sandbox = sinon.createSandbox();
@@ -23,7 +23,7 @@ describe("TimeComponent", () => {
   });
 
   describe("Format", () => {
-    let spy;
+    let spy: jest.SpyInstance;
     beforeEach(() => {
       spy = jest.spyOn(TimeComponent, "calcCenterPosition");
     });
@@ -53,7 +53,7 @@ describe("TimeComponent", () => {
   });
 
   describe("Initial position", () => {
-    let spy;
+    let spy: jest.SpyInstance;
     beforeEach(() => {
       spy = jest.spyOn(TimeComponent, "calcCenterPosition");
     });
diff --git a/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx
similarity index 92%
rename from test/time_input_test.test.tsx
rename to src/test/time_input_test.test.tsx
index ad84a488..a04ba890 100644
--- a/test/time_input_test.test.tsx
+++ b/src/test/time_input_test.test.tsx
@@ -1,8 +1,8 @@
 import { render, fireEvent, act } from "@testing-library/react";
 import React from "react";
 
-import DatePicker from "../src/index";
-import InputTimeComponent from "../src/input_time";
+import DatePicker from "../index";
+import InputTimeComponent from "../input_time";
 
 import CustomTimeInput from "./helper_components/custom_time_input";
 
@@ -86,8 +86,8 @@ describe("timeInput", () => {
 
     const expectedDate = new Date(mockDate);
     const [expectedHours, expectedMinutes] = newTime.split(":");
-    expectedDate.setHours(parseInt(expectedHours));
-    expectedDate.setMinutes(parseInt(expectedMinutes));
+    expectedDate.setHours(parseInt(expectedHours!));
+    expectedDate.setMinutes(parseInt(expectedMinutes!));
 
     expect(onChangeSpy).toHaveBeenCalledWith(expectedDate);
   });
@@ -128,8 +128,8 @@ describe("timeInput", () => {
 
     const expectedDate = new Date(mockDate);
     const [expectedHours, expectedMinutes] = newTime.split(":");
-    expectedDate.setHours(parseInt(expectedHours));
-    expectedDate.setMinutes(parseInt(expectedMinutes));
+    expectedDate.setHours(parseInt(expectedHours!));
+    expectedDate.setMinutes(parseInt(expectedMinutes!));
 
     expect(mockOnChange).toHaveBeenCalledWith(expectedDate);
   });
@@ -153,8 +153,8 @@ describe("timeInput", () => {
 
     const expectedDate = new Date(mockCurrentDate);
     const [expectedHours, expectedMinutes] = newTime.split(":");
-    expectedDate.setHours(parseInt(expectedHours));
-    expectedDate.setMinutes(parseInt(expectedMinutes));
+    expectedDate.setHours(parseInt(expectedHours!));
+    expectedDate.setMinutes(parseInt(expectedMinutes!));
 
     expect(mockOnChange).toHaveBeenCalledWith(expectedDate);
 
diff --git a/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx
similarity index 89%
rename from test/timepicker_test.test.tsx
rename to src/test/timepicker_test.test.tsx
index c5cc9519..0c51ed07 100644
--- a/test/timepicker_test.test.tsx
+++ b/src/test/timepicker_test.test.tsx
@@ -1,8 +1,8 @@
 import { render, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
 
-import { newDate, formatDate, KeyType } from "../src/date_utils";
-import DatePicker from "../src/index";
+import { formatDate, KeyType } from "../date_utils";
+import DatePicker from "../index";
 
 import { getKey } from "./test_utils";
 
@@ -35,7 +35,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time?.querySelectorAll("li");
-    fireEvent.click(lis[1]);
+    fireEvent.click(lis[1] ?? new HTMLElement());
     expect(getInputString()).toBe("February 28, 2018 12:30 AM");
   });
 
@@ -48,7 +48,7 @@ describe("TimePicker", () => {
   });
 
   it("should not close datepicker after time clicked when shouldCloseOnSelect is false", () => {
-    let instance;
+    let instance: DatePicker | null;
     const { container } = render(
       <DatePicker
         ref={(node) => {
@@ -58,15 +58,15 @@ describe("TimePicker", () => {
         showTimeSelect
       />,
     );
-    fireEvent.focus(instance.input);
+    fireEvent.focus(instance!.input!);
     const time = container.querySelector(".react-datepicker__time-container");
     const lis = time?.querySelectorAll("li") ?? [];
-    fireEvent.click(lis[0]);
-    expect(instance.state.open).toBe(true);
+    fireEvent.click(lis?.[0] ?? new HTMLElement());
+    expect(instance!.state.open).toBe(true);
   });
 
   it("should show different colors for times", () => {
-    const handleTimeColors = (time) => {
+    const handleTimeColors = (time: Date) => {
       return time.getHours() < 12 ? "red" : "green";
     };
     const { container } = render(
@@ -152,7 +152,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter));
     expect(getInputString()).toBe("February 28, 2018 12:30 AM");
   });
 
@@ -163,7 +163,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Space));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Space));
     expect(getInputString()).toBe("February 28, 2018 12:30 AM");
   });
 
@@ -176,7 +176,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter));
 
     await waitFor(() => {
       expect(document.activeElement).toBe(input);
@@ -190,7 +190,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Escape));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Escape));
     expect(getInputString()).toBe("February 28, 2018 4:43 PM");
   });
 
@@ -204,7 +204,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Escape));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Escape));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -218,7 +218,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Enter));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -232,7 +232,7 @@ describe("TimePicker", () => {
       datePicker?.querySelector(".react-datepicker__time-container") ??
       new HTMLElement();
     const lis = time.querySelectorAll("li");
-    fireEvent.keyDown(lis[1], getKey(KeyType.Space));
+    fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Space));
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -250,7 +250,7 @@ describe("TimePicker", () => {
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
-  function setManually(string) {
+  function setManually(string: string) {
     fireEvent.focus(instance?.input ?? new HTMLElement());
     fireEvent.change(instance?.input ?? new HTMLElement(), {
       target: { value: string },
@@ -285,8 +285,8 @@ describe("TimePicker", () => {
     ).container;
   }
 
-  function onChange(m) {
-    onChangeMoment = newDate(m);
-    renderDatePicker(m);
+  function onChange(m: Date | null) {
+    onChangeMoment = m ?? undefined;
+    renderDatePicker(m?.toISOString() ?? "");
   }
 });
diff --git a/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx
similarity index 99%
rename from test/week_number_test.test.tsx
rename to src/test/week_number_test.test.tsx
index 533cb5ae..4ecd5bcd 100644
--- a/test/week_number_test.test.tsx
+++ b/src/test/week_number_test.test.tsx
@@ -1,8 +1,8 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import WeekNumber from "../src/week_number";
+import * as utils from "../date_utils";
+import WeekNumber from "../week_number";
 
 function renderWeekNumber(weekNumber, props = {}) {
   return render(
diff --git a/test/week_picker_test.test.tsx b/src/test/week_picker_test.test.tsx
similarity index 97%
rename from test/week_picker_test.test.tsx
rename to src/test/week_picker_test.test.tsx
index 8051d4fb..1320e19b 100644
--- a/test/week_picker_test.test.tsx
+++ b/src/test/week_picker_test.test.tsx
@@ -1,7 +1,7 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import DatePicker from "../src/index";
+import DatePicker from "../index";
 
 describe("WeekPicker", () => {
   it("should change the week when clicked on any option in the picker", () => {
diff --git a/test/week_test.test.tsx b/src/test/week_test.test.tsx
similarity index 77%
rename from test/week_test.test.tsx
rename to src/test/week_test.test.tsx
index ab810ec1..c3d080e6 100644
--- a/test/week_test.test.tsx
+++ b/src/test/week_test.test.tsx
@@ -1,25 +1,33 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import Week from "../src/week";
+import {
+  addDays,
+  addWeeks,
+  formatDate,
+  getStartOfWeek,
+  getWeek,
+  isEqual,
+  newDate,
+} from "../date_utils";
+import Week from "../week";
 
 describe("Week", () => {
   it("should have the week CSS class", () => {
-    const { container } = render(<Week day={utils.newDate()} />);
+    const { container } = render(<Week day={newDate()} />);
     expect(container.querySelector(".react-datepicker__week")).not.toBeNull();
   });
 
   it("should render the days of the week", () => {
-    const weekStart = utils.getStartOfWeek(utils.newDate("2015-12-20"));
+    const weekStart = getStartOfWeek(newDate("2015-12-20"));
     const { container } = render(<Week day={weekStart} />);
 
     const days = container.querySelectorAll(".react-datepicker__day");
     expect(days.length).toBe(7);
     days.forEach((day, offset) => {
-      const expectedDay = utils.addDays(weekStart, offset);
+      const expectedDay = addDays(weekStart, offset);
       expect(day.getAttribute("aria-label")).toEqual(
-        `Choose ${utils.formatDate(expectedDay, "PPPP")}`,
+        `Choose ${formatDate(expectedDay, "PPPP")}`,
       );
     });
 
@@ -30,15 +38,15 @@ describe("Week", () => {
   });
 
   it("should render the week number", () => {
-    const weekStart = utils.getStartOfWeek(utils.newDate("2015-12-20"));
+    const weekStart = getStartOfWeek(newDate("2015-12-20"));
     const { container } = render(<Week showWeekNumber day={weekStart} />);
 
     const days = container.querySelectorAll(".react-datepicker__day");
     expect(days.length).toBe(7);
     days.forEach((day, offset) => {
-      const expectedDay = utils.addDays(weekStart, offset);
+      const expectedDay = addDays(weekStart, offset);
       expect(day.getAttribute("aria-label")).toEqual(
-        `Choose ${utils.formatDate(expectedDay, "PPPP")}`,
+        `Choose ${formatDate(expectedDay, "PPPP")}`,
       );
     });
 
@@ -49,13 +57,13 @@ describe("Week", () => {
   });
 
   it("should call the provided onDayClick function", () => {
-    let dayClicked = null;
+    let dayClicked: Date | null = null;
 
-    function onDayClick(day) {
+    function onDayClick(day: Date) {
       dayClicked = day;
     }
 
-    const weekStart = utils.newDate("2015-12-20");
+    const weekStart = newDate("2015-12-20");
     const { container } = render(
       <Week day={weekStart} onDayClick={onDayClick} />,
     );
@@ -64,7 +72,7 @@ describe("Week", () => {
       fireEvent.click(day);
       // eslint-disable-next-line jest/no-conditional-expect
       expect(day.getAttribute("aria-label")).toEqual(
-        `Choose ${utils.formatDate(dayClicked, "PPPP")}`,
+        `Choose ${formatDate(dayClicked, "PPPP")}`,
       );
     } else {
       // eslint-disable-next-line jest/no-conditional-expect
@@ -73,13 +81,13 @@ describe("Week", () => {
   });
 
   it("should call the provided onWeekSelect function and pass the first day of the week", () => {
-    let firstDayReceived = null;
+    let firstDayReceived: Date | null = null;
 
-    function onWeekClick(newFirstWeekDay) {
+    function onWeekClick(newFirstWeekDay: Date) {
       firstDayReceived = newFirstWeekDay;
     }
 
-    const weekStart = utils.newDate("2015-12-20");
+    const weekStart = newDate("2015-12-20");
     const setOpenSpy = jest.fn();
     const { container } = render(
       <Week
@@ -94,11 +102,11 @@ describe("Week", () => {
     );
     expect(weekNumberElement).not.toBeNull();
     fireEvent.click(weekNumberElement ?? new HTMLElement());
-    expect(utils.isEqual(firstDayReceived, weekStart)).toBe(true);
+    expect(isEqual(firstDayReceived, weekStart)).toBe(true);
   });
 
   it("should call the provided onWeekSelect function and call the setopen function", () => {
-    const weekStart = utils.newDate("2015-12-20");
+    const weekStart = newDate("2015-12-20");
     const setOpenSpy = jest.fn();
 
     const { container } = render(
@@ -119,7 +127,7 @@ describe("Week", () => {
   });
 
   it("should call the provided onWeekSelect function and not call the setopen function when 'shouldCloseOnSelect' is false", () => {
-    const weekStart = utils.newDate("2015-12-20");
+    const weekStart = newDate("2015-12-20");
     const setOpenSpy = jest.fn();
     const setOnWeekSelect = jest.fn();
 
@@ -144,14 +152,14 @@ describe("Week", () => {
   });
 
   it("should call the provided onWeekSelect function and pass the week number", () => {
-    let weekNumberReceived = null;
+    let weekNumberReceived: number | null = null;
 
-    function onWeekClick(unused, newWeekNumber) {
+    function onWeekClick(_unused: Date, newWeekNumber: number) {
       weekNumberReceived = newWeekNumber;
     }
 
-    const weekStart = utils.newDate("2015-12-20");
-    const realWeekNumber = utils.getWeek(weekStart);
+    const weekStart = newDate("2015-12-20");
+    const realWeekNumber = getWeek(weekStart);
     const { container } = render(
       <Week
         day={weekStart}
@@ -169,14 +177,14 @@ describe("Week", () => {
   });
 
   it("should set the week number with the provided formatWeekNumber function", () => {
-    let firstDayReceived = null;
+    let firstDayReceived: Date | null = null;
 
-    function weekNumberFormatter(newFirstWeekDay) {
+    function weekNumberFormatter(newFirstWeekDay: Date) {
       firstDayReceived = newFirstWeekDay;
       return 9;
     }
 
-    const weekStart = utils.newDate("2015-12-20");
+    const weekStart = newDate("2015-12-20");
     const { container } = render(
       <Week
         day={weekStart}
@@ -188,13 +196,13 @@ describe("Week", () => {
       ".react-datepicker__week-number",
     );
     expect(weekNumberElement).not.toBeNull();
-    expect(utils.isEqual(firstDayReceived, weekStart)).toBe(true);
+    expect(isEqual(firstDayReceived, weekStart)).toBe(true);
     expect(weekNumberElement?.getAttribute("aria-label")).toBe("week  9");
   });
 
   it("should call the provided onDayMouseEnter (Mouse Event) function", () => {
     const onDayMouseEnterSpy = jest.fn();
-    const weekStart = utils.newDate();
+    const weekStart = newDate();
     const { container } = render(
       <Week day={weekStart} onDayMouseEnter={onDayMouseEnterSpy} />,
     );
@@ -204,13 +212,13 @@ describe("Week", () => {
     fireEvent.mouseEnter(day ?? new HTMLElement());
 
     expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith(
-      utils.getStartOfWeek(weekStart),
+      getStartOfWeek(weekStart),
     );
   });
 
   it("should call the provided onDayMouseEnter (Pointer Event) function", () => {
     const onDayMouseEnterSpy = jest.fn();
-    const weekStart = utils.newDate();
+    const weekStart = newDate();
     const { container } = render(
       <Week
         day={weekStart}
@@ -224,7 +232,7 @@ describe("Week", () => {
       fireEvent.pointerEnter(day);
       // eslint-disable-next-line jest/no-conditional-expect
       expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith(
-        utils.getStartOfWeek(weekStart),
+        getStartOfWeek(weekStart),
       );
       // eslint-disable-next-line jest/no-conditional-expect
     } else expect(day).not.toBeNull();
@@ -235,8 +243,8 @@ describe("Week", () => {
       const onWeekSelect = jest.fn();
       const day = new Date("2022-02-01");
       const weekNumber = 5;
-      const event = { target: {} };
-      let instance;
+      const event = { target: {} } as React.MouseEvent<HTMLDivElement>;
+      let instance: Week | null;
       render(
         <Week
           ref={(node) => {
@@ -249,15 +257,15 @@ describe("Week", () => {
           setOpen={() => {}}
         />,
       );
-      instance.handleWeekClick(day, weekNumber, event);
+      instance!.handleWeekClick(day, weekNumber, event);
       expect(onWeekSelect).toHaveBeenCalledWith(day, weekNumber, event);
     });
 
     it("should call handleDayClick with start of week if showWeekPicker prop is true", () => {
       const day = new Date("2022-02-01");
       const weekNumber = 5;
-      const event = { target: {} };
-      let instance;
+      const event = { target: {} } as React.MouseEvent<HTMLDivElement>;
+      let instance: Week | null;
       render(
         <Week
           ref={(node) => {
@@ -270,8 +278,8 @@ describe("Week", () => {
           setOpen={() => {}}
         />,
       );
-      const handleDayClick = jest.spyOn(instance, "handleDayClick");
-      instance.handleWeekClick(day, weekNumber, event);
+      const handleDayClick = jest.spyOn(instance!, "handleDayClick");
+      instance!.handleWeekClick(day, weekNumber, event);
       expect(handleDayClick).toHaveBeenCalledWith(day, event);
     });
 
@@ -279,8 +287,8 @@ describe("Week", () => {
       const setOpen = jest.fn();
       const day = new Date("2022-02-01");
       const weekNumber = 5;
-      const event = { target: {} };
-      let instance;
+      const event = { target: {} } as React.MouseEvent<HTMLDivElement>;
+      let instance: Week | null;
       render(
         <Week
           ref={(node) => {
@@ -293,14 +301,14 @@ describe("Week", () => {
           setOpen={setOpen}
         />,
       );
-      instance.handleWeekClick(day, weekNumber, event);
+      instance!.handleWeekClick(day, weekNumber, event);
       expect(setOpen).toHaveBeenCalledWith(false);
     });
   });
 
   describe("selected and keyboard-selected", () => {
     it("selected is current week and preselected is also current week", () => {
-      const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00");
+      const currentWeek = newDate("2023-10-22T13:09:53+02:00");
       const { container } = render(
         <Week
           day={currentWeek}
@@ -314,8 +322,8 @@ describe("Week", () => {
     });
 
     it("selected is current week and preselected is not current week", () => {
-      const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00");
-      const preSelection = utils.addWeeks(currentWeek, 1);
+      const currentWeek = newDate("2023-10-22T13:09:53+02:00");
+      const preSelection = addWeeks(currentWeek, 1);
       const { container } = render(
         <Week
           day={currentWeek}
@@ -329,8 +337,8 @@ describe("Week", () => {
     });
 
     it("selected is not current week and preselect is current week", () => {
-      const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00");
-      const selected = utils.addWeeks(currentWeek, 1);
+      const currentWeek = newDate("2023-10-22T13:09:53+02:00");
+      const selected = addWeeks(currentWeek, 1);
       const { container } = render(
         <Week
           day={currentWeek}
@@ -347,8 +355,8 @@ describe("Week", () => {
     });
 
     it("select is not current week and preselect is not current week", () => {
-      const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00");
-      const selected = utils.addWeeks(currentWeek, 1);
+      const currentWeek = newDate("2023-10-22T13:09:53+02:00");
+      const selected = addWeeks(currentWeek, 1);
       const { container } = render(
         <Week day={currentWeek} selected={selected} preSelection={selected} />,
       );
@@ -363,12 +371,12 @@ describe("Week", () => {
   describe("selected and calendarStartDay", () => {
     it("shoud starts the selected day on the Wednesday immediately preceding that day, When the calendarStartDay Props is 3.", () => {
       const calendarStartDay = 3;
-      const currentWeek = utils.getStartOfWeek(
-        utils.newDate("2024-03-01"),
+      const currentWeek = getStartOfWeek(
+        newDate("2024-03-01"),
         undefined,
         calendarStartDay,
       );
-      const selected = utils.addWeeks(currentWeek, 0);
+      const selected = addWeeks(currentWeek, 0);
       const { container } = render(
         <Week
           day={currentWeek}
@@ -388,13 +396,13 @@ describe("Week", () => {
 
       expect(days).toHaveLength(7);
       // 2024-02-28 to 2024-03-05
-      expect(days[0].textContent).toBe("28");
-      expect(days[1].textContent).toBe("29");
-      expect(days[2].textContent).toBe("1");
-      expect(days[3].textContent).toBe("2");
-      expect(days[4].textContent).toBe("3");
-      expect(days[5].textContent).toBe("4");
-      expect(days[6].textContent).toBe("5");
+      expect(days[0]?.textContent).toBe("28");
+      expect(days[1]?.textContent).toBe("29");
+      expect(days[2]?.textContent).toBe("1");
+      expect(days[3]?.textContent).toBe("2");
+      expect(days[4]?.textContent).toBe("3");
+      expect(days[5]?.textContent).toBe("4");
+      expect(days[6]?.textContent).toBe("5");
     });
   });
 });
diff --git a/test/year_dropdown_options_test.test.tsx b/src/test/year_dropdown_options_test.test.tsx
similarity index 96%
rename from test/year_dropdown_options_test.test.tsx
rename to src/test/year_dropdown_options_test.test.tsx
index bee0d4d0..28641969 100644
--- a/test/year_dropdown_options_test.test.tsx
+++ b/src/test/year_dropdown_options_test.test.tsx
@@ -2,16 +2,16 @@ import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 import onClickOutside from "react-onclickoutside";
 
-import * as utils from "../src/date_utils";
-import YearDropdownOptions from "../src/year_dropdown_options";
+import * as utils from "../date_utils";
+import YearDropdownOptions from "../year_dropdown_options";
 
 describe("YearDropdownOptions", () => {
   let yearDropdown: HTMLElement | null = null,
-    handleChangeResult;
-  const mockHandleChange = function (changeInput) {
+    handleChangeResult: number;
+  const mockHandleChange = function (changeInput: number) {
     handleChangeResult = changeInput;
   };
-  let onCancelSpy;
+  let onCancelSpy: jest.Mock;
 
   beforeEach(() => {
     onCancelSpy = jest.fn();
@@ -143,7 +143,7 @@ describe("YearDropdownOptions", () => {
 
   describe("selected", () => {
     const className = "react-datepicker__year-option--selected_year";
-    let yearOptions;
+    let yearOptions: HTMLElement[];
 
     beforeEach(() => {
       yearOptions = Array.from(
@@ -152,11 +152,11 @@ describe("YearDropdownOptions", () => {
     });
 
     describe("if selected", () => {
-      let selectedYearOption;
+      let selectedYearOption: HTMLElement;
       beforeEach(() => {
         selectedYearOption = yearOptions.find((o) =>
           o.classList.contains(className),
-        );
+        )!;
       });
       it("should apply the selected class", () => {
         expect(selectedYearOption.classList.contains(className)).toBe(true);
@@ -169,11 +169,11 @@ describe("YearDropdownOptions", () => {
     });
 
     describe("if not selected", () => {
-      let selectedYearOption;
+      let selectedYearOption: HTMLElement;
       beforeEach(() => {
         selectedYearOption = yearOptions.find(
           (o) => !o.classList.contains(className),
-        );
+        )!;
       });
       it("should not apply the selected class", () => {
         expect(selectedYearOption.classList.contains(className)).toBe(false);
@@ -504,7 +504,7 @@ describe("YearDropdownOptions with scrollable dropwdown", () => {
   it("should scroll year dropdown to the middle on open", () => {
     const onCancelSpy = jest.fn();
     const onChangeSpy = jest.fn();
-    let instance;
+    let instance: YearDropdownOptions | null;
     render(
       <YearDropdownOptions
         ref={(node) => {
@@ -518,11 +518,13 @@ describe("YearDropdownOptions with scrollable dropwdown", () => {
       />,
     );
 
-    instance.dropdownRef.current = {
+    (
+      instance!.dropdownRef as { current: Record<string, number> | null }
+    ).current = {
       scrollHeight: 800,
       clientHeight: 400,
     };
-    instance.componentDidMount();
-    expect(instance.dropdownRef.current.scrollTop).toBe(200);
+    instance!.componentDidMount();
+    expect(instance!.dropdownRef.current!.scrollTop).toBe(200);
   });
 });
diff --git a/test/year_dropdown_test.test.tsx b/src/test/year_dropdown_test.test.tsx
similarity index 90%
rename from test/year_dropdown_test.test.tsx
rename to src/test/year_dropdown_test.test.tsx
index 197cd158..b91a9c84 100644
--- a/test/year_dropdown_test.test.tsx
+++ b/src/test/year_dropdown_test.test.tsx
@@ -1,15 +1,16 @@
 import { render, fireEvent } from "@testing-library/react";
-import range from "lodash/range";
 import React from "react";
 
-import { newDate } from "../src/date_utils";
-import YearDropdown from "../src/year_dropdown";
+import { newDate } from "../date_utils";
+import YearDropdown from "../year_dropdown";
+
+import { range } from "./test_utils";
 
 describe("YearDropdown", () => {
   let yearDropdown: HTMLElement | null = null;
-  let lastOnChangeValue;
+  let lastOnChangeValue: number | null;
 
-  function onChangeMock(value) {
+  function onChangeMock(value: number) {
     lastOnChangeValue = value;
   }
 
@@ -66,7 +67,7 @@ describe("YearDropdown", () => {
       );
       fireEvent.click(
         (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ??
-          [])[0],
+          [])[0] ?? new HTMLElement(),
       );
       expect(
         yearDropdown?.querySelectorAll("react-datepicker__year-dropdown"),
@@ -80,7 +81,7 @@ describe("YearDropdown", () => {
       );
       fireEvent.click(
         (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ??
-          [])[6],
+          [])[6] ?? new HTMLElement(),
       );
       expect(lastOnChangeValue).toBeNull();
     });
@@ -92,7 +93,7 @@ describe("YearDropdown", () => {
       );
       fireEvent.click(
         (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ??
-          [])[7],
+          [])[7] ?? new HTMLElement(),
       );
       expect(lastOnChangeValue).toEqual(2014);
     });
@@ -104,9 +105,9 @@ describe("YearDropdown", () => {
       const select: NodeListOf<HTMLSelectElement> =
         yearDropdown.querySelectorAll(".react-datepicker__year-select");
       expect(select).toHaveLength(1);
-      expect(select[0].value).toBe("2015");
+      expect(select[0]?.value).toBe("2015");
 
-      const options = select[0].querySelectorAll("option");
+      const options = select[0]?.querySelectorAll("option") ?? [];
       expect(Array.from(options).map((o) => o.textContent)).toEqual(
         range(1900, 2101).map((n) => `${n}`),
       );
@@ -121,9 +122,9 @@ describe("YearDropdown", () => {
       const select: NodeListOf<HTMLSelectElement> =
         yearDropdown.querySelectorAll(".react-datepicker__year-select");
       expect(select).toHaveLength(1);
-      expect(select[0].value).toEqual("2015");
+      expect(select[0]?.value).toEqual("2015");
 
-      const options = select[0].querySelectorAll("option");
+      const options = select[0]?.querySelectorAll("option") ?? [];
       expect(Array.from(options).map((o) => o.textContent)).toEqual(
         range(1988, 2017).map((n) => `${n}`),
       );
diff --git a/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx
similarity index 68%
rename from test/year_picker_test.test.tsx
rename to src/test/year_picker_test.test.tsx
index 94c05e5a..d7aa4cf8 100644
--- a/test/year_picker_test.test.tsx
+++ b/src/test/year_picker_test.test.tsx
@@ -1,9 +1,18 @@
 import { render, fireEvent } from "@testing-library/react";
 import React from "react";
 
-import * as utils from "../src/date_utils";
-import DatePicker from "../src/index";
-import Year from "../src/year";
+import {
+  DEFAULT_YEAR_ITEM_NUMBER,
+  KeyType,
+  formatDate,
+  getStartOfYear,
+  getYear,
+  getYearsPeriod,
+  newDate,
+  setYear,
+} from "../date_utils";
+import DatePicker from "../index";
+import Year from "../year";
 
 import { getKey } from "./test_utils";
 
@@ -25,7 +34,7 @@ describe("YearPicker", () => {
     const yearItems = container.querySelectorAll(
       ".react-datepicker__year-text",
     );
-    expect(yearItems.length).toBe(utils.DEFAULT_YEAR_ITEM_NUMBER);
+    expect(yearItems.length).toBe(DEFAULT_YEAR_ITEM_NUMBER);
   });
 
   it("should show year picker component with specific year item number", () => {
@@ -57,7 +66,7 @@ describe("YearPicker", () => {
     const firstYearDiv = container.querySelectorAll(
       ".react-datepicker__year-text",
     )[1];
-    fireEvent.click(firstYearDiv);
+    fireEvent.click(firstYearDiv ?? new HTMLElement());
     expect(onYearChangeSpy).toHaveBeenCalled();
   });
 
@@ -73,8 +82,8 @@ describe("YearPicker", () => {
     );
     const year = container.querySelectorAll(
       ".react-datepicker__year-text--selected",
-    )[0].textContent;
-    expect(year).toBe(utils.getYear(date).toString());
+    )[0]?.textContent;
+    expect(year).toBe(getYear(date).toString());
   });
 
   it("should have current year class when element of array equal of current year", () => {
@@ -89,7 +98,7 @@ describe("YearPicker", () => {
     const year = container.querySelector(
       ".react-datepicker__year-text--today",
     )?.textContent;
-    expect(year).toBe(utils.getYear(date).toString());
+    expect(year).toBe(getYear(date).toString());
   });
 
   it("should have aria-current date when element of array equal to current year", () => {
@@ -126,9 +135,9 @@ describe("YearPicker", () => {
   it("should return disabled class if current date is out of bound of minDate and maxDate", () => {
     const { container } = render(
       <Year
-        date={utils.newDate("2020-01-01")}
-        minDate={utils.newDate("2018-01-01")}
-        maxDate={utils.newDate("2025-01-01")}
+        date={newDate("2020-01-01")}
+        minDate={newDate("2018-01-01")}
+        maxDate={newDate("2025-01-01")}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
       />,
@@ -140,11 +149,11 @@ describe("YearPicker", () => {
   });
 
   it("should not return disabled class if current date is before minDate but same year", () => {
-    const date = utils.newDate("2023-01-01");
+    const date = newDate("2023-01-01");
     const { container } = render(
       <Year
         date={date}
-        minDate={utils.newDate("2023-12-31")}
+        minDate={newDate("2023-12-31")}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
       />,
@@ -152,24 +161,24 @@ describe("YearPicker", () => {
     const yearTexts = container.querySelectorAll(
       ".react-datepicker__year-text",
     );
-    const firstYear = utils.getYearsPeriod(
+    const firstYear = getYearsPeriod(
       date,
-      utils.DEFAULT_YEAR_ITEM_NUMBER,
+      DEFAULT_YEAR_ITEM_NUMBER,
     ).startPeriod;
 
     expect(
-      yearTexts[2023 - firstYear].classList.contains(
+      yearTexts[2023 - firstYear]?.classList.contains(
         "react-datepicker__year-text--disabled",
       ),
     ).toBe(false);
   });
 
   it("should not return disabled class if current date is after maxDate but same year", () => {
-    const date = utils.newDate("2023-12-31");
+    const date = newDate("2023-12-31");
     const { container } = render(
       <Year
         date={date}
-        maxDate={utils.newDate("2023-01-01")}
+        maxDate={newDate("2023-01-01")}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
       />,
@@ -177,33 +186,33 @@ describe("YearPicker", () => {
     const yearTexts = container.querySelectorAll(
       ".react-datepicker__year-text",
     );
-    const firstYear = utils.getYearsPeriod(
+    const firstYear = getYearsPeriod(
       date,
-      utils.DEFAULT_YEAR_ITEM_NUMBER,
+      DEFAULT_YEAR_ITEM_NUMBER,
     ).startPeriod;
 
     expect(
-      yearTexts[2023 - firstYear].classList.contains(
+      yearTexts[2023 - firstYear]?.classList.contains(
         "react-datepicker__year-text--disabled",
       ),
     ).toBe(false);
   });
 
   it("should return disabled class if specified excludeDate", () => {
-    const date = utils.newDate("2023-12-31");
-    const firstYear = utils.getYearsPeriod(
+    const date = newDate("2023-12-31");
+    const firstYear = getYearsPeriod(
       date,
-      utils.DEFAULT_YEAR_ITEM_NUMBER,
+      DEFAULT_YEAR_ITEM_NUMBER,
     ).startPeriod;
 
     const excludeDates: Date[] = [];
     for (let year = firstYear; year <= 2023; year++) {
-      excludeDates.push(utils.newDate(`${year}-01-01`));
+      excludeDates.push(newDate(`${year}-01-01`));
     }
 
     const { container } = render(
       <Year
-        date={utils.newDate("2023-01-01")}
+        date={newDate("2023-01-01")}
         excludeDates={excludeDates}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
@@ -217,25 +226,25 @@ describe("YearPicker", () => {
     for (let i = 0; i <= 2023 - firstYear; i++) {
       const year = yearTexts[i];
       expect(
-        year.classList.contains("react-datepicker__year-text--disabled"),
+        year?.classList.contains("react-datepicker__year-text--disabled"),
       ).toBe(true);
     }
   });
 
   it("should return disabled class if specified includeDate", () => {
-    const date = utils.newDate("2023-12-31");
-    const firstYear = utils.getYearsPeriod(
+    const date = newDate("2023-12-31");
+    const firstYear = getYearsPeriod(
       date,
-      utils.DEFAULT_YEAR_ITEM_NUMBER,
+      DEFAULT_YEAR_ITEM_NUMBER,
     ).startPeriod;
 
     const includeDates: Date[] = [];
     for (let year = firstYear; year <= 2023; year++) {
-      includeDates.push(utils.newDate(`${year}-01-01`));
+      includeDates.push(newDate(`${year}-01-01`));
     }
     const { container } = render(
       <Year
-        date={utils.newDate("2023-01-01")}
+        date={newDate("2023-01-01")}
         includeDates={includeDates}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
@@ -250,13 +259,13 @@ describe("YearPicker", () => {
     for (let i = 0; i <= pos; i++) {
       const year = yearTexts[i];
       expect(
-        year.classList.contains("react-datepicker__year-text--disabled"),
+        year?.classList.contains("react-datepicker__year-text--disabled"),
       ).toBe(false);
     }
     for (let i = pos + 1; i < 12; i++) {
       const year = yearTexts[i];
       expect(
-        year.classList.contains("react-datepicker__year-text--disabled"),
+        year?.classList.contains("react-datepicker__year-text--disabled"),
       ).toBe(true);
     }
   });
@@ -267,7 +276,7 @@ describe("YearPicker", () => {
     }
     const { container } = render(
       <Year
-        date={utils.newDate()}
+        date={newDate()}
         renderYearContent={renderYearContent}
         onYearMouseEnter={() => {}}
         onYearMouseLeave={() => {}}
@@ -281,9 +290,9 @@ describe("YearPicker", () => {
     it("should add range classes", () => {
       const { container } = render(
         <Year
-          date={utils.newDate("2009-01-01")}
-          startDate={utils.newDate("2009-01-01")}
-          endDate={utils.newDate("2012-01-01")}
+          date={newDate("2009-01-01")}
+          startDate={newDate("2009-01-01")}
+          endDate={newDate("2012-01-01")}
           onYearMouseEnter={() => {}}
           onYearMouseLeave={() => {}}
         />,
@@ -294,31 +303,31 @@ describe("YearPicker", () => {
       );
 
       expect(inRangeYears.length).toBe(4);
-      expect(inRangeYears[0].textContent).toBe("2009");
-      expect(inRangeYears[1].textContent).toBe("2010");
-      expect(inRangeYears[2].textContent).toBe("2011");
-      expect(inRangeYears[3].textContent).toBe("2012");
+      expect(inRangeYears[0]?.textContent).toBe("2009");
+      expect(inRangeYears[1]?.textContent).toBe("2010");
+      expect(inRangeYears[2]?.textContent).toBe("2011");
+      expect(inRangeYears[3]?.textContent).toBe("2012");
 
       const rangeStartYear = container.querySelectorAll(
         ".react-datepicker__year-text--range-start",
       );
 
       expect(rangeStartYear.length).toBe(1);
-      expect(rangeStartYear[0].textContent).toBe("2009");
+      expect(rangeStartYear[0]?.textContent).toBe("2009");
 
       const rangeEndYear = container.querySelectorAll(
         ".react-datepicker__year-text--range-end",
       );
 
       expect(rangeEndYear.length).toBe(1);
-      expect(rangeEndYear[0].textContent).toBe("2012");
+      expect(rangeEndYear[0]?.textContent).toBe("2012");
     });
 
     it("should not add range classes when start date is not defined", () => {
       const { container } = render(
         <Year
-          date={utils.newDate("2009-01-01")}
-          endDate={utils.newDate("2012-01-01")}
+          date={newDate("2009-01-01")}
+          endDate={newDate("2012-01-01")}
           onYearMouseEnter={() => {}}
           onYearMouseLeave={() => {}}
         />,
@@ -342,8 +351,8 @@ describe("YearPicker", () => {
     it("should not add range classes when end date is not defined", () => {
       const { container } = render(
         <Year
-          date={utils.newDate("2009-01-01")}
-          startDate={utils.newDate("2009-01-01")}
+          date={newDate("2009-01-01")}
+          startDate={newDate("2009-01-01")}
           onYearMouseEnter={() => {}}
           onYearMouseLeave={() => {}}
         />,
@@ -368,10 +377,10 @@ describe("YearPicker", () => {
       it("should add in-selecting-range class if year is between the selecting date and end date", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2015-01-01")}
-            date={utils.newDate("2012-01-01")}
-            endDate={utils.newDate("2016-01-01")}
-            selectingDate={utils.newDate("2015-01-01")}
+            preSelection={newDate("2015-01-01")}
+            date={newDate("2012-01-01")}
+            endDate={newDate("2016-01-01")}
+            selectingDate={newDate("2015-01-01")}
             selectsStart
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -383,17 +392,17 @@ describe("YearPicker", () => {
         );
 
         expect(years.length).toBe(2);
-        expect(years[0].textContent).toBe("2015");
-        expect(years[1].textContent).toBe("2016");
+        expect(years[0]?.textContent).toBe("2015");
+        expect(years[1]?.textContent).toBe("2016");
       });
 
       it("should add in-selecting-range class if year is between the start date and selecting date", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2011-01-01")}
-            date={utils.newDate("2015-01-01")}
-            startDate={utils.newDate("2010-01-01")}
-            selectingDate={utils.newDate("2011-01-01")}
+            preSelection={newDate("2011-01-01")}
+            date={newDate("2015-01-01")}
+            startDate={newDate("2010-01-01")}
+            selectingDate={newDate("2011-01-01")}
             selectsEnd
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -405,16 +414,16 @@ describe("YearPicker", () => {
         );
 
         expect(years.length).toBe(2);
-        expect(years[0].textContent).toBe("2010");
-        expect(years[1].textContent).toBe("2011");
+        expect(years[0]?.textContent).toBe("2010");
+        expect(years[1]?.textContent).toBe("2011");
       });
 
       it("should use pre selection date if selecting date is not defined", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2011-01-01")}
-            date={utils.newDate("2015-01-01")}
-            startDate={utils.newDate("2010-01-01")}
+            preSelection={newDate("2011-01-01")}
+            date={newDate("2015-01-01")}
+            startDate={newDate("2010-01-01")}
             selectsEnd
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -426,17 +435,17 @@ describe("YearPicker", () => {
         );
 
         expect(years.length).toBe(2);
-        expect(years[0].textContent).toBe("2010");
-        expect(years[1].textContent).toBe("2011");
+        expect(years[0]?.textContent).toBe("2010");
+        expect(years[1]?.textContent).toBe("2011");
       });
 
       it("should add in-selecting-range class for one year picker if year is between the start date and selecting date", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2011-01-01")}
-            date={utils.newDate("2015-01-01")}
-            startDate={utils.newDate("2010-02-01")}
-            selectingDate={utils.newDate("2011-01-01")}
+            preSelection={newDate("2011-01-01")}
+            date={newDate("2015-01-01")}
+            startDate={newDate("2010-02-01")}
+            selectingDate={newDate("2011-01-01")}
             selectsRange
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -447,16 +456,16 @@ describe("YearPicker", () => {
         );
 
         expect(years.length).toBe(2);
-        expect(years[0].textContent).toBe("2010");
-        expect(years[1].textContent).toBe("2011");
+        expect(years[0]?.textContent).toBe("2010");
+        expect(years[1]?.textContent).toBe("2011");
       });
 
       it("should not add in-selecting-range class for one year picker if the start date is not defined", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2014-01-01")}
-            date={utils.newDate("2015-01-01")}
-            selectingDate={utils.newDate("2014-01-01")}
+            preSelection={newDate("2014-01-01")}
+            date={newDate("2015-01-01")}
+            selectingDate={newDate("2014-01-01")}
             selectsRange
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -472,10 +481,10 @@ describe("YearPicker", () => {
       it("should not add in-selecting-range class for one year picker if the end date is defined", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2014-01-01")}
-            date={utils.newDate("2013-01-01")}
-            selectingDate={utils.newDate("2014-01-01")}
-            endDate={utils.newDate("2013-01-01")}
+            preSelection={newDate("2014-01-01")}
+            date={newDate("2013-01-01")}
+            selectingDate={newDate("2014-01-01")}
+            endDate={newDate("2013-01-01")}
             selectsRange
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -491,10 +500,10 @@ describe("YearPicker", () => {
       it("should add 'selecting-range-start' class to the start selecting year", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2012-01-01")}
-            date={utils.newDate("2010-01-01")}
-            endDate={utils.newDate("2015-01-01")}
-            selectingDate={utils.newDate("2012-01-01")}
+            preSelection={newDate("2012-01-01")}
+            date={newDate("2010-01-01")}
+            endDate={newDate("2015-01-01")}
+            selectingDate={newDate("2012-01-01")}
             selectsStart
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -504,17 +513,17 @@ describe("YearPicker", () => {
           ".react-datepicker__year-text--selecting-range-start",
         );
         expect(years.length).toBe(1);
-        expect(years[0].textContent).toBe("2012");
+        expect(years[0]?.textContent).toBe("2012");
       });
 
       it("should add 'selecting-range-end' class to the end selecting year", () => {
         const { container } = render(
           <Year
-            preSelection={utils.newDate("2014-01-01")}
-            date={utils.newDate("2012-01-01")}
-            startDate={utils.newDate("2010-01-01")}
-            endDate={utils.newDate("2015-01-01")}
-            selectingDate={utils.newDate("2014-01-01")}
+            preSelection={newDate("2014-01-01")}
+            date={newDate("2012-01-01")}
+            startDate={newDate("2010-01-01")}
+            endDate={newDate("2015-01-01")}
+            selectingDate={newDate("2014-01-01")}
             selectsEnd
             onYearMouseEnter={() => {}}
             onYearMouseLeave={() => {}}
@@ -524,7 +533,7 @@ describe("YearPicker", () => {
           ".react-datepicker__year-text--selecting-range-end",
         );
         expect(years.length).toBe(1);
-        expect(years[0].textContent).toBe("2014");
+        expect(years[0]?.textContent).toBe("2014");
       });
     });
   });
@@ -533,13 +542,11 @@ describe("YearPicker", () => {
     const className = "react-datepicker__year-text--keyboard-selected";
 
     it("should set the date to the selected year of the previous period when previous button clicked", () => {
-      let date;
-      const expectedDate = utils.getStartOfYear(
-        utils.setYear(utils.newDate(), 2008),
-      );
+      let date: Date | null;
+      const expectedDate = getStartOfYear(setYear(newDate(), 2008));
       const { container } = render(
         <DatePicker
-          selected={utils.newDate("2020-01-01")}
+          selected={newDate("2020-01-01")}
           adjustDateOnChange
           showYearPicker
           onChange={(d) => {
@@ -559,20 +566,18 @@ describe("YearPicker", () => {
       const year = container.querySelector(".react-datepicker__year");
       const allPreselectedYears = year?.querySelectorAll(`.${className}`) ?? [];
 
-      expect(utils.formatDate(date, "dd.MM.yyyy")).toBe(
-        utils.formatDate(expectedDate, "dd.MM.yyyy"),
+      expect(formatDate(date!, "dd.MM.yyyy")).toBe(
+        formatDate(expectedDate, "dd.MM.yyyy"),
       );
       expect(allPreselectedYears.length).toBe(1);
     });
 
     it("should set the date to the selected year of the next period when next button clicked", () => {
-      let date;
-      const expectedDate = utils.getStartOfYear(
-        utils.setYear(utils.newDate(), 2032),
-      );
+      let date: Date | null;
+      const expectedDate = getStartOfYear(setYear(newDate(), 2032));
       const { container } = render(
         <DatePicker
-          selected={utils.newDate("2020-01-01")}
+          selected={newDate("2020-01-01")}
           adjustDateOnChange
           showYearPicker
           onChange={(d) => {
@@ -593,31 +598,34 @@ describe("YearPicker", () => {
       const year = container.querySelector(".react-datepicker__year");
       const allPreselectedYears = year?.querySelectorAll(`.${className}`) ?? [];
 
-      expect(utils.formatDate(date, "dd.MM.yyyy")).toBe(
-        utils.formatDate(expectedDate, "dd.MM.yyyy"),
+      expect(formatDate(date!, "dd.MM.yyyy")).toBe(
+        formatDate(expectedDate, "dd.MM.yyyy"),
       );
       expect(allPreselectedYears.length).toBe(1);
     });
   });
 
   describe("Keyboard navigation", () => {
-    let preSelected;
-    const setPreSelection = (preSelection) => {
-      preSelected = preSelection;
+    let preSelected: Date | null | undefined;
+    const setPreSelection = (preSelection: Date | null | undefined) => {
+      preSelected = preSelection ? newDate(preSelection) : preSelection;
     };
 
-    let selectedDay;
-    const onDayClick = (day) => {
+    let selectedDay: Date | null | undefined;
+    const onDayClick = (day: Date | null | undefined) => {
       selectedDay = day;
     };
 
-    const getPicker = (initialDate, props = {}) =>
+    const getPicker = (
+      initialDate: string | number | Date | null | undefined,
+      props = {},
+    ) =>
       render(
         <Year
-          selected={utils.newDate(initialDate)}
-          date={utils.newDate(initialDate)}
+          selected={newDate(initialDate)}
+          date={newDate(initialDate)}
           setPreSelection={setPreSelection}
-          preSelection={utils.newDate(initialDate)}
+          preSelection={newDate(initialDate)}
           onDayClick={onDayClick}
           yearItemNumber={12}
           onYearMouseEnter={() => {}}
@@ -626,147 +634,144 @@ describe("YearPicker", () => {
         />,
       ).container;
 
-    const simulateLeft = (target) =>
-      fireEvent.keyDown(target, getKey(utils.KeyType.ArrowLeft));
-    const simulateRight = (target) =>
-      fireEvent.keyDown(target, getKey(utils.KeyType.ArrowRight));
-    const simulateUp = (target) =>
-      fireEvent.keyDown(target, getKey(utils.KeyType.ArrowUp));
-    const simulateDown = (target) =>
-      fireEvent.keyDown(target, getKey(utils.KeyType.ArrowDown));
+    const simulateLeft = (target: HTMLElement) =>
+      fireEvent.keyDown(target, getKey(KeyType.ArrowLeft));
+    const simulateRight = (target: HTMLElement) =>
+      fireEvent.keyDown(target, getKey(KeyType.ArrowRight));
+    const simulateUp = (target: HTMLElement) =>
+      fireEvent.keyDown(target, getKey(KeyType.ArrowUp));
+    const simulateDown = (target: HTMLElement) =>
+      fireEvent.keyDown(target, getKey(KeyType.ArrowDown));
 
     it("should preSelect and set 2020 on left arrow press", () => {
       const yearPicker = getPicker("2021-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateLeft(target);
+      simulateLeft(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2020);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2020);
     });
     it("should preSelect and set 2022 on left arrow press", () => {
       const yearPicker = getPicker("2021-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateRight(target);
+      simulateRight(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2022);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2022);
     });
     it("should preSelect and set 2021 on up arrow press", () => {
       const yearPicker = getPicker("2024-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateUp(target);
+      simulateUp(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2021);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2021);
     });
     it("should preSelect and set 2027 on down arrow press", () => {
       const yearPicker = getPicker("2024-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateDown(target);
+      simulateDown(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2027);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2027);
     });
     it("should paginate from 2018 to 2015", () => {
       const yearPicker = getPicker("2018-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateUp(target);
+      simulateUp(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2015);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2015);
     });
     it("should paginate from 2018 to 2016 with custom yearItemNumber", () => {
       const yearPicker = getPicker("2018-01-01", { yearItemNumber: 8 });
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateUp(target);
+      simulateUp(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2016);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2016);
     });
     it("should paginate from 2019 to 2014 with custom yearItemNumber", () => {
       const yearPicker = getPicker("2019-01-01", { yearItemNumber: 8 });
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateUp(target);
+      simulateUp(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2014);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2014);
     });
     it("should paginate from 2028 to 2031", () => {
       const yearPicker = getPicker("2028-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateDown(target);
+      simulateDown(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2031);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2031);
     });
     it("should paginate from 2024 to 2026 with custom yearItemNumber", () => {
       const yearPicker = getPicker("2024-01-01", { yearItemNumber: 8 });
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateDown(target);
+      simulateDown(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2026);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2026);
     });
     it("should paginate from 2022 to 2027 with custom yearItemNumber", () => {
       const yearPicker = getPicker("2022-01-01", { yearItemNumber: 8 });
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateDown(target);
+      simulateDown(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2027);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2027);
     });
     it("should paginate from 2017 to 2016", () => {
       const yearPicker = getPicker("2017-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateLeft(target);
+      simulateLeft(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2016);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2016);
     });
     it("should paginate from 2028 to 2029", () => {
       const yearPicker = getPicker("2028-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateRight(target);
+      simulateRight(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2029);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2029);
     });
     it("should select 2021 when Enter key is pressed", () => {
       const yearPicker = getPicker("2021-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
 
-      fireEvent.keyDown(
-        target ?? new HTMLElement(),
-        getKey(utils.KeyType.Enter),
-      );
-      expect(utils.getYear(selectedDay)).toBe(2021);
+      fireEvent.keyDown(target ?? new HTMLElement(), getKey(KeyType.Enter));
+      expect(selectedDay ? getYear(selectedDay) : selectedDay).toBe(2021);
     });
 
     it("should call onKeyDown handler on any key press", () => {
@@ -786,10 +791,7 @@ describe("YearPicker", () => {
 
       const year = container.querySelector(".react-datepicker__year-text");
 
-      fireEvent.keyDown(
-        year ?? new HTMLElement(),
-        getKey(utils.KeyType.ArrowDown),
-      );
+      fireEvent.keyDown(year ?? new HTMLElement(), getKey(KeyType.ArrowDown));
 
       expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
     });
@@ -797,15 +799,12 @@ describe("YearPicker", () => {
     it("should select 2021 when Space key is pressed", () => {
       const yearPicker = getPicker("2021-01-01");
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
 
-      fireEvent.keyDown(
-        target ?? new HTMLElement(),
-        getKey(utils.KeyType.Space),
-      );
-      expect(utils.getYear(selectedDay)).toBe(2021);
+      fireEvent.keyDown(target ?? new HTMLElement(), getKey(KeyType.Space));
+      expect(selectedDay ? getYear(selectedDay) : selectedDay).toBe(2021);
     });
 
     it("should disable keyboard navigation", () => {
@@ -813,12 +812,12 @@ describe("YearPicker", () => {
         disabledKeyboardNavigation: true,
       });
 
-      const target = yearPicker.querySelector(
+      const target = yearPicker.querySelector<HTMLElement>(
         ".react-datepicker__year-text--selected",
       );
-      simulateRight(target);
+      simulateRight(target ?? new HTMLElement());
 
-      expect(utils.getYear(preSelected)).toBe(2021);
+      expect(preSelected ? getYear(preSelected) : preSelected).toBe(2021);
     });
   });