How to perform unit testing on function invoked by event using Jest in React project

component.js

    import {React,useState} from 'React'
    import Container from 'react-bootstrap/Container'
    import Row from 'react-bootstrap/Row'
    import Col from 'react-bootstrap/Col'
    import Form from 'react-bootstrap/Form'
    import DatePicker from 'react-datepicker'
    import Row from 'react-bootstrap/Row'
    ...
    ...
    function Details (){
    const[initialDate, setInitialDate] = useState(new Date());
    ...
    ...
    
    return(
    <DatePicker test-id="dPicker" selected = {initialDate} onChange={(date) => setInitialDate(date)}
    )
    }

I wanted to unit test the onchange function code for above datepicker using Jest . What piece of code will help me?

We can use ByDisplayValue query to

> Returns the input, textarea, or select element that has the matching display value.

Since the initial date state is new Date(), we need to set a mock system date for it so that our test result will be stable no matter when and where(CI/CD server can be any region) running it. We need to use jest.setSystemTime(now?: number | Date) to

> Set the current system time used by fake timers

E.g.

example.tsx:

import React, { useState } from "react";
import DatePicker from "react-datepicker";

export const Example = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

example.test.tsx:

import { fireEvent, render, screen } from "@testing-library/react"
import '@testing-library/jest-dom';
import React from "react"
import { Example } from "./example"

describe('76034834', () => {
  test('should pass', () => {
    jest
      .useFakeTimers('modern')
      .setSystemTime(new Date('2015-12-20'));
    render(<Example />);
    const input = screen.getByDisplayValue('12/20/2015');
    fireEvent.change(input, { target: { value: new Date('2014-01-02') } });
    expect(screen.getByDisplayValue('01/02/2014')).toBeInTheDocument();
  })
})

Test result:

 PASS  stackoverflow/76034834/example.test.tsx (7.151 s)
  76034834
    ✓ should pass (34 ms)

-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |     100 |      100 |     100 |     100 |                   
 example.tsx |     100 |      100 |     100 |     100 |                   
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.455 s, estimated 8 s

package versions:

"react": "^16.14.0",
"react-datepicker": "^4.11.0",
"@testing-library/react": "^11.2.7",
"jest": "^26.6.3",