I've got a solution. Thank you for your effort!

You need to mock theChildComponent and make sure theonIncrement prop is correctly passed and called.

1. Mock theChildComponent in your test file.
2. Render theParentComponent.
3. Trigger theonIncrement function via the mockedChildComponent.

ParentComponent.js

importReact,{useState}from'react';importChildComponentfrom'./ChildComponent';constParentComponent=()=>{const[count,setCount]=useState(0);consthandleIncrement=()=>{setCount(count+1);};return(<div><ChildComponentonIncrement={handleIncrement}/><p>Count:{count}</p></div>);};exportdefaultParentComponent;

ChildComponent.js

importReactfrom'react';constChildComponent=(props)=>{return(<buttononClick={props.onIncrement}>      Increment Count</button>);};exportdefaultChildComponent;

ParentComponent.test.js

importReactfrom'react';import{render,fireEvent,screen}from'@testing-library/react';importParentComponentfrom'./ParentComponent';// Mock ChildComponentjest.mock('./ChildComponent',()=>(props)=>(<buttondata-testid="test-button"onClick={props.onIncrement}>    Test Button</button>));describe('ParentComponent',()=>{test('increments count on button click',()=>{render(<ParentComponent/>);// Get the button and click itconsttestButton=screen.getByTestId('test-button');fireEvent.click(testButton);// Check if the count incrementedexpect(screen.getByText('Count: 1')).toBeInTheDocument();});});

Why can't we call the handleIncrement() function directly instead of cloning it's implementation, which in this case is Count: 1. Let's say there is a handler function which is executing more than one statements, for example:-
handleFunction () => { setCount(1); doThis(); doThat(); .... }

How to handle such cases?