How to properly Assert calling a React function using Jest - reactjs

Question

I've been trying to test if a React function has been called on Click but i always get the same result :
Expected number of calls: >= 1
Received number of calls: 0
And the test fails, this is my Setup,
This is MyComponent
import React from 'react';
export default function MyComponent() {
function handleClick() {
console.log('Clicking');
}
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}
And here is my Jest Test
import { render, screen, fireEvent } from '#testing-library/react';
import MyComponent from './MyComponent';
describe('It should run the tests', () => {
it('Should call the funct', () => {
//Arrange
render(<MyComponent />);
const handleClick = jest.fn();
const button = screen.getByRole('button');
//Action
fireEvent.click(button);
//Assert
expect(handleClick).toHaveBeenCalled();
});
});
This works normally on the app, it does call the function and logs 'Clicking'
Thanks in advance!

Answer 1

You have defined the mock function but you're Component doesn't know anything about it since it's defined within the component.
What you could do is pass the onClick as a prop to the Component. This way you could pass any handler function required for the Component as a prop.
import React from 'react';
export default function MyComponent({ onClick }) { // 👈 receive as a prop
/* function handleClick() {
console.log('Clicking');
} */
return (
<div>
<button onClick={onClick}>Click</button> {/* 👈 call the prop */}
</div>
);
}
Update test:
import { render, screen, fireEvent } from '#testing-library/react';
import MyComponent from './MyComponent';
describe('It should run the tests', () => {
it('Should call the funct', () => {
//Arrange
const handleClick = jest.fn();
render(<MyComponent onClick={handleClick} />); // 👈 pass the mock
const button = screen.getByRole('button');
//Action
fireEvent.click(button);
//Assert
expect(handleClick).toHaveBeenCalled();
});
});