title: How to spy on method inside a React Functional Component?
body: <p>I have this functional component.</p>
  
  <p><strong>Search.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>
  function Search() {
    const [term, setTerm] = useState('sun');
  
    function handleOnChange(e) {
      if (!e.target.value) {
        return false;
      }
      setTerm(e.target.value);
      return true;
    }
  
    return &lt;input type="text" onChange={handleOnChange} placeholder="Search" /&gt;
  }
  
  </code></pre>
  
  <p><strong>Search.test.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { render, fireEvent } from '@testing-library/react';
  import Search from '.';
  
  describe('when type a valid term', () =&gt; {
    it('update the state', () =&gt; {
      const { getByPlaceholderText } = render(&lt;Search /&gt;;
  
      // this doesn't work. The handleOnChange method is private. How to deal with this?
      const handlerSpy = jest.spyOn(Search, 'handleOnChange');
  
      fireEvent.click(getByPlaceholderText(/search/i), { target: { value: 'moon' } });
  
      expect(handlerSpy).toHaveReturnedWith(true);
    });
  });
  
  
  </code></pre>
  
  <p>I don't know if I'm trying the wrong approach. I just need to test what happens if the user type an empty term. Appreciate any suggestion.</p>