Spy on a function inside functional component using React testing library

Question

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?

Answer 1

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();
});

Answer 2

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.