how to test react custom hook function call on button click - jestjs

Question

I am having a problem testing the button click event. In test cases, toHaveBeenCalled returns 0.
Here below is my component file:
index.js (component file)
import { Button, ButtonThemes } from 'stitcht-ui';
import useReels from './hooks/useReels';
import { ReelCard } from '../../components/ReelCard';
import styles from './dashboard.module.scss';
import CreateReelButton from '../../components/CreateReelButton';
const Dashboard = () => {
const {
reels,
fetchMoreReels,
loading,
loadMoreRef,
allReelsLoaded,
threadDeleted,
} = useReels();
const navigate = useNavigate();
const reelOnClick = (reelId) => navigate(`/reel/${reelId}`);
if (!reels) {
return (
<div className={styles.reels}>
<ReelCard loading />
<ReelCard loading />
<ReelCard loading />
</div>
);
}
if (reels && reels.length === 0) {
return (
<div className={styles['empty-message-container']}>
<img src="/reel.svg" alt="No Reels" height="120" width="120" />
<p className={styles['empty-message-title']}>
You don&apos;t have any threads
</p>
<p className={styles['empty-message']}>
Create a thread to start a conversation with your communities.
</p>
<CreateReelButton label="CREATE A THREAD" variant="outlined" />
</div>
);
}
return (
<div id="dashboard">
<h2 className="title">Your Threads</h2>
<div className={styles.reels}>
{reels.map((reel) => (
<ReelCard
key={reel.id}
loading={false}
reel={reel}
onClick={() => reelOnClick(reel.id)}
onThreadDeleted={() => threadDeleted(reel)}
/>
))}
</div>
<div className={styles['load-more']} ref={loadMoreRef}>
<Button
theme={ButtonThemes.PRIMARY}
onClick={fetchMoreReels}
loading={loading}
disabled={allReelsLoaded || reels.length < 10}
>
{allReelsLoaded || reels.length < 10
? 'No more threads'
: 'Load More'}
</Button>
</div>
</div>
);
};
export default Dashboard;
index.test.tsx (test file)
import { when, resetAllWhenMocks, verifyAllWhenMocksCalled } from 'jest-when';
import { render, screen, waitFor, userEvent } from '../../../test-utils';
import Dashboard from '.';
import { UserContextValue } from '../../providers/auth';
import useReels from './hooks/useReels';
const userData = {
// dummy user data
};
const reelsData = {
reels: //reels array ,
loading: false,
loadMoreRef: { current: null },
allReelsLoaded: false,
fetchMoreReels: jest.fn(),
threadDeleted: jest.fn(),
};
jest.mock('../../../src/service/user');
jest.mock('../../../src/service/reel');
jest.mock('./hooks/useReels');
jest.mock('../../../src/providers/auth', () => ({
useCurrentUser: () =>
({
user: userData,
} as unknown as UserContextValue),
}));
afterEach(() => {
verifyAllWhenMocksCalled();
resetAllWhenMocks();
});
beforeEach(() => {
when(useReels).expectCalledWith().mockReturnValue(reelsData);
});
describe('Dashboard testing', () => {
test(`"Load more" button should be performed on click`, async () => {
render(<Dashboard />);
const loadMoreButton = screen.getByRole('button', {
name: 'Load More',
});
expect(loadMoreButton).toBeVisible();
await userEvent.click(loadMoreButton);
await waitFor(() => {
expect(jest.fn()).toHaveBeenCalled();
});
});
});
When toHaveBeenCalled always returning 0 but it should return 1.
Can someone tell me why this is return always 0 instead of 1?