I'm trying to spy on a function inside a function component using react testing library. I wanted to test whether handleClick function has been called whenever the button is clicked.
Here's excerpt from my code
Component
const Foo = () => {
const handleClick = () => {}
return <div>
<button data-testid="button" onClick={handleClick}>Continue</button>
</div>
}
Test case
it("should handle continue button click", async () => {
const { getByTestId } = render(<Foo />);
const button = getByTestId("button");
const spy = jest.spyOn(Foo, "handleClick");
act(() => {
fireEvent.click(button);
});
expect(spy).toHaveBeenCalled();
});
The error I'm getting is as below
Cannot spy the handleClick property because it is not a function; undefined given instead
Could anyone please help?
You are trying to spy on handleClick as if it was a property of Foo, which is a function.
I can move handleClick to another file and import it both in the component and the test:
handler.js
export const handleClick = () => {}
Component
import { handleClick } from './handler.js'
const Foo = () => {
return <div>
<button data-testid="button" onClick={handleClick}>Continue</button>
</div>
}
Test case
import * as handlers from './handler.js';
it("should handle continue button click", async () => {
const { getByTestId } = render(<Foo />);
const button = getByTestId("button");
const spy = jest.spyOn(handlers, "handleClick");
act(() => {
fireEvent.click(button);
});
expect(spy).toHaveBeenCalled();
});
You don't want to spy on handleClick. Instead, you want to test what effect handleClick had on the component. Your handleClick callback is an implementation detail, and as a general rule, you don't test that.