Test mousedown event - reactjs

Question

I have a react code which is drag and resize of the height of div and it works perfectly fine and clickable div is resizer I need to write a unit test to test event listeners are called or not
useEffect(() => {
let mousePosition;
retriveAgentHistoryHeight();
const panel = dragableElement?.current as HTMLElement;
const resizerEle = resizer?.current as HTMLElement;
const setPanelHeight = dx => {
const newHeight = `${parseInt(getComputedStyle(panel, '').height) + dx}px`;
panel.style.height = newHeight;
saveAgentHistoryHeight(newHeight);
};
const resize = e => {
const dx = mousePosition - e.y;
mousePosition = e.y;
setPanelHeight(dx);
};
const touchResizeEvent = e => {
const y = parseInt(e.touches[0].clientY);
const dx = mousePosition - y;
mousePosition = y;
setPanelHeight(dx);
};
const mouseOnPressEvent = e => {
mousePosition = e.y;
document.addEventListener('mousemove', resize, false);
setResizeClass('active');
panel.style.userSelect = 'none';
};
const screenTouchEvent = e => {
mousePosition = parseInt(e.touches[0].clientY);
document.addEventListener('touchmove', touchResizeEvent);
setResizeClass('active');
panel.style.userSelect = 'none';
};
const mouseOnReleaseEvent = () => {
document.removeEventListener('mousemove', resize, false);
setResizeClass('');
panel.style.userSelect = 'auto';
};
const screenTouchEndEvent = () => {
document.removeEventListener('touchmove', touchResizeEvent);
setResizeClass('');
panel.style.userSelect = 'auto';
};
if (resizerEle) {
resizerEle.addEventListener('mousedown', mouseOnPressEvent);
document.addEventListener('mouseup', mouseOnReleaseEvent);
resizerEle.addEventListener('touchstart', screenTouchEvent);
document.addEventListener('touchend', screenTouchEndEvent);
}
return () => {
if (resizerEle) {
resizerEle.removeEventListener('mousedown', mouseOnPressEvent);
document.removeEventListener('mouseup', mouseOnReleaseEvent);
resizerEle.removeEventListener('touchstart', screenTouchEvent);
document.removeEventListener('touchend', screenTouchEndEvent);
}
};
}, []);
my test.js
it('should load verify load event of resizer on mouse release', async () => {
const {getByTestId } = render(<ContactHistoryHandledByAgent />);
const mouseOnPressEvent = jest.fn(a => a);
fireEvent.mouseUp(getByTestId('agent-history-resizer'));
expect(mouseOnPressEvent).toBeCalled();
})
expect(mouseOnPressEvent).toBeCalled(); is not working
I wanted to check event such as mouseOnPressEvent is called or not

Answer 1

You can assign jest.fn() to a constant and pass it as the event parameter to your Component. Then you specify with the simulate(event) method the event which will happen during the test. And at the end you check if it was called.
Here an example for a onClick test:
const onclick = jest.fn();
const component = render(<ContactHistoryHandledByAgent onClick={onclick} />);
component.simulate("click");
expect(onclick).toHaveBeenCalled();