const MyPage = (props) => {
    const setCol = useCallback((input)=> 
        // some implementation here
        myFn() // myFn is a property in props
    )
    const handleOnSelection = useCallback ((e) => {
            ...
            setCol(someInput)
            ...
        }, [props]
    )
    return (
        <div>
            <div>
                <GravityLabel optional={false} size='medium'>
                    Select here
                </GravityLabel>
                <GravityTooltip message={msg} size='small' position='top-left'/>
            </div>
            <GravityComboBox
              optionsArray={arr}
              onSelect={(e) => handleOnSelection(e)}
              disabled={false}
              value={default}
              data-testid='dropdown-to-be-tested'
            />
        </div>
    )
}
-------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
const mockFn = jest.fn()
const props = {
    myFn: mockFn
    // other props
}
describe('my tests', () => {
 it('should handle onSelect change', async () => {
    render(<MyPage {...props} />)
    const dropDown = screen.getByTestId('dropdown-to-be-tested')
    fireEvent.change(dropDown, {
      target: { value: 'selection1' }
    })
    await waitFor(() => {
      expect(mockFn).toHaveBeenCalledTimes(1)
    })
  })

I have a MyPage.js and it is working perfectly as expected in ui (so definitely no issue with the code in MyPage.js). I want to write tests for it to increase code coverage.

Above is my (super-shortened version of) code for MyPage.js and MyPage.test.js

Issue:

Error: expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0

I put a debugger and found out it’s not going into handleOnSelection , and so not calling setCol, and so not calling mockFn, resulting in Received number of calls: 0

Any idea why and how to fix?