🐛 Fix TimePicker & DatePicker random test fail issue

__tests__/components/DatePicker/DatePicker.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DatePicker } from '../../../src';
 
+import MockDate from 'mockdate';
 import '@testing-library/jest-dom';
 import { fireEvent, render, act, screen } from '@testing-library/react';
 
@@ -48,10 +49,11 @@ describe('DatePicker', () => {
   });
 
   it('Should render a datepicker with today date', () => {
+    MockDate.set(new Date(2021, 5, 3));
     render(<CreateDatePicker date={new Date()} />);
 
     const datePickerInput = document.querySelector('input');
-    expect(datePickerInput.value).toBe(new Date().toLocaleDateString());
+    expect(datePickerInput.value).toBe('6/3/2021');
   });
 
   it('Should re-render on date change', () => {
@@ -105,14 +107,11 @@ describe('DatePicker', () => {
   });
 
   it('Should render datepicker with today date and time', () => {
-    let currentDateTime: string;
-    act(() => {
-      render(<CreateDatePicker withTimePicker={{}} date={new Date()} />);
-      currentDateTime = new Date().toLocaleString();
-    });
+    MockDate.set(new Date(2025, 4, 18, 18, 6, 44));
+    render(<CreateDatePicker withTimePicker={{}} date={new Date()} />);
 
     const datePickerInput = document.querySelector('input');
-    expect(datePickerInput.value).toBe(currentDateTime);
+    expect(datePickerInput.value).toBe('5/18/2025, 6:06:44 PM');
   });
 
   it('Should close datepicker', () => {

__tests__/components/DatePicker/TimePicker.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TimePicker } from '../../../src';
 
+import MockDate from 'mockdate';
 import '@testing-library/jest-dom';
 import { fireEvent, render, act } from '@testing-library/react';
 
@@ -23,9 +24,6 @@ const CreateTimePicker = (props: { use12Hour?: boolean; disabled?: boolean; bode
   );
 };
 
-// Convert 0: number -> 00: string to compare with TimePicker Input value
-export const toInputString = (n: number) => (n < 10 ? '0' + n : n.toString());
-
 describe('TimePicker', () => {
   it('Should render a timepicker component', () => {
     render(<CreateTimePicker />);
@@ -211,6 +209,7 @@ describe('TimePicker', () => {
   });
 
   it('Should show current time when clicked on now button', () => {
+    MockDate.set(new Date(2007, 6, 7, 7, 5, 17));
     render(<CreateTimePicker />);
 
     const timePickerInput = document.querySelector('.sha-el-input');
@@ -221,17 +220,12 @@ describe('TimePicker', () => {
     });
 
     const tooltip = document.querySelector('.rc-tooltip');
-    let currentTime: string[] = [];
     act(() => {
       fireEvent.click(tooltip.querySelector('button'));
-      currentTime = [
-        toInputString(new Date().getHours()),
-        toInputString(new Date().getMinutes()),
-        toInputString(new Date().getSeconds()),
-      ];
     });
 
-    expect(timePickerInput.querySelector('input').value).toBe(`${currentTime[0]}:${currentTime[1]}:${currentTime[2]}`);
+    const value = timePickerInput.querySelector('input').value;
+    expect(value).toBe('07:05:17');
 
     act(() => {
       fireEvent.click(document.querySelector('input'));
@@ -240,22 +234,23 @@ describe('TimePicker', () => {
     const timePickerContainer = document.querySelector('.rc-tooltip').querySelector('.sha-el-row');
 
     const hours = timePickerContainer.querySelector('.hour-column').querySelectorAll('p');
-    expect(hours[Number(currentTime[0])]).toHaveStyle(`
+    expect(hours[7]).toHaveStyle(`
       background: #536DFE;
     `);
 
     const minutes = timePickerContainer.querySelector('.min-column').querySelectorAll('p');
-    expect(minutes[Number(currentTime[1])]).toHaveStyle(`
+    expect(minutes[5]).toHaveStyle(`
       background: #536DFE;
     `);
 
     const seconds = timePickerContainer.querySelector('.sec-column').querySelectorAll('p');
-    expect(seconds[Number(currentTime[2])]).toHaveStyle(`
+    expect(seconds[17]).toHaveStyle(`
       background: #536DFE;
     `);
   });
 
   it('Should show current time when clicked on now button in 12 hour format', () => {
+    MockDate.set(new Date(2007, 6, 7, 24, 33, 59));
     render(<CreateTimePicker use12Hour />);
 
     const timePickerInput = document.querySelector('.sha-el-input');
@@ -266,24 +261,12 @@ describe('TimePicker', () => {
     });
 
     const tooltip = document.querySelector('.rc-tooltip');
-    let currentTime: string[] = [];
     act(() => {
       fireEvent.click(tooltip.querySelector('button'));
-      currentTime = [
-        new Date().getHours() > 12
-          ? toInputString(new Date().getHours() - 12)
-          : new Date().getHours() === 0
-          ? '12'
-          : toInputString(new Date().getHours()),
-        toInputString(new Date().getMinutes()),
-        toInputString(new Date().getSeconds()),
-        new Date().getHours() < 12 ? 'AM' : 'PM',
-      ];
-    });
-
-    expect(timePickerInput.querySelector('input').value).toBe(
-      `${currentTime[0]}:${currentTime[1]}:${currentTime[2]} ${currentTime[3]}`,
-    );
+    });
+
+    const value = timePickerInput.querySelector('input').value;
+    expect(value).toBe('12:33:59 AM');
 
     act(() => {
       fireEvent.click(document.querySelector('input'));
@@ -292,23 +275,22 @@ describe('TimePicker', () => {
     const timePickerContainer = document.querySelector('.rc-tooltip').querySelector('.sha-el-row');
 
     const hours = timePickerContainer.querySelector('.hour-column').querySelectorAll('p');
-    expect(hours[Number(currentTime[0] === '12' ? '0' : currentTime[0])]).toHaveStyle(`
+    expect(hours[0]).toHaveStyle(`
       background: #536DFE;
     `);
 
     const minutes = timePickerContainer.querySelector('.min-column').querySelectorAll('p');
-    expect(minutes[Number(currentTime[1])]).toHaveStyle(`
+    expect(minutes[33]).toHaveStyle(`
       background: #536DFE;
     `);
 
     const seconds = timePickerContainer.querySelector('.sec-column').querySelectorAll('p');
-    expect(seconds[Number(currentTime[2])]).toHaveStyle(`
+    expect(seconds[59]).toHaveStyle(`
       background: #536DFE;
     `);
 
     const period = timePickerContainer.querySelector('.am-column').querySelectorAll('p');
-    const index = currentTime[3] === 'AM' ? 0 : 1;
-    expect(period[index]).toHaveStyle(`
+    expect(period[0]).toHaveStyle(`
       background: #536DFE;
     `);
   });

package.json

@@ -69,6 +69,7 @@
     "husky": "^4.2.5",
     "jest": "^26.6.3",
     "lint-staged": "^10.2.13",
+    "mockdate": "^3.0.5",
     "prettier": "^2.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

yarn.lock

@@ -10071,6 +10071,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mockdate@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
+  integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"