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.

Please, if you have a better answer left it here. After a search for different approaches, I realized another way to test it.

First, I attached the current state to the value attribute of my search field.

This way, I can check if the attribute value of my search field changes accordingly

import { render, fireEvent } from '@testing-library/react';
import Search from '.';

describe('when type a valid term', () => {
  it('update the state', () => {
    const { getByPlaceholderText } = render(<Search />);
    const inputField = getByPlaceholderText(/search/i);
    fireEvent.change(inputField, { target: { value: 'moon' } });

    expect(inputField).toHaveValue('moon');
  });
});

It's possible to write a snapshot test as well.

This line:

import * as myModule from './myModule.js'

...imports the module bindings for myModule.js into myModule.

Then this line:

const spy = jest.spyOn(myModule, 'bar');

...wraps the module export for bar in a spy...

...but the spy never gets called because useAHook doesn't call the module export for bar, it just calls bar directly.

If you modify useAHook to call the module export for bar then the spy will get called.

There are a couple of ways to do that.

You can move bar into its own module...

...or you can import the module bindings for myModule.js so you can call the module export for bar:

import { useCallback } from 'react';

import * as myModule from './myModule';  // <= import the module bindings

export const useAHook = (arg1, arg2) => {
  const foo = useCallback(() => {
    myModule.bar(arg1, arg2);  // <= call the module export for bar
  }, [arg1, arg2]);

  return foo;
}

export const bar = (a, b) => {
   //does some stuff with a and b
}