title: How to test function calls on event?
body: <p>I have the following component</p>
  <pre><code>&lt;InputGroup size={size} inside&gt;
      &lt;Input placeholder={placeholder} type={type} onChange={changeHandler} /&gt;
      &lt;InputGroup.Button&gt;
        &lt;Icon icon=&quot;search&quot; /&gt;
      &lt;/InputGroup.Button&gt;
    &lt;/InputGroup&gt;
  </code></pre>
  <p>That calls this function on &quot;onChange&quot; event</p>
  <pre><code>const changeHandler = (search: string) =&gt; {
    if (search) {
      setDocumentosFiltrados(() =&gt; {
      return documentos?.filter(documento =&gt; 
            documento.descricaoDocumento.toLowerCase().includes(search.toLowerCase()))
      })
    } 
    else {
        setDocumentosFiltrados(documentos)
    }
  }
  </code></pre>
  <p>So I'm trying to test it using the code below</p>
  <pre><code> test('Must call the search function', () =&gt; {
      const handleSearch = jest.fn()
  
      render(&lt;MyComponent /&gt;)
  
      const searchbar = screen.getByPlaceholderText('Pesquisar')
      fireEvent.change(searchbar)
      expect(handleSearch).toBeCalled()
    })
  </code></pre>
  <p>But the expectation isn't fulfilled, because the function is not called... What am I doing wrong? How can I test this code?</p>