title: React unit test with spyOn on useState is not calling mocked function as it should
body: <p>I'm learning about testing in React, I have a component with input to write what to search, a select box to select where to search and a button to order by whats selected in the select box.</p>
  
  <p>I made a test to check if when I changed the option of select box, to see if it called the setFilterBy function. It goes inside the function and changes as predicted from "title" to "author" but it doesn't detect the call of the mocked function. Anyone knows whats wrong with this?</p>
  
  <p>Component</p>
  
  <pre><code>import React, { useState } from "react"
  import PropTypes from "prop-types"
  
  interface Props {
      handleFilterChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;, filterBy: string) =&gt; void
      handleSortClick: (filterBy: string) =&gt; void
      total: number
      filtered: number
  }
  
  export const PostFilter: React.FC&lt;Props&gt; = ({ handleFilterChange, handleSortClick, total, filtered }) =&gt; {
      const [filterBy, setFilterBy] = useState&lt;string&gt;("title")
  
      const handleSelect = (event: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
          console.log("a")
          setFilterBy(event.target.value)
      }
  
      return (
          &lt;div&gt;
              &lt;label&gt; Filter &lt;/label&gt;
              &lt;input className="search-input" type="text" name="search" onChange={event =&gt; handleFilterChange(event, filterBy)}/&gt;
              &lt;span style={{ padding: "4px" }}&gt;{ filtered &gt; 0 &amp;&amp; `${total - filtered} posts found.` } &lt;/span&gt;
              By
              &lt;select className="search-type" style={{ margin: "4px" }} value={filterBy} onChange={handleSelect}&gt;
                  &lt;option value="title"&gt;Title&lt;/option&gt;
                  &lt;option value="author"&gt;Author&lt;/option&gt;
              &lt;/select&gt;
              &lt;button className="sort-button" onClick={event =&gt; handleSortClick(filterBy)}&gt; Sort &lt;/button&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Test</p>
  
  <pre><code>import React from "react"
  import { mount } from "enzyme"
  import { PostFilter } from "./PostFilter"
  
  const handleFilterChange = jest.fn()
  const handleSortClick = jest.fn()
  const setState = jest.fn()
  
  describe("PosFilter", () =&gt; {
      let wrapper
  
      beforeEach(() =&gt; {
          jest.spyOn(React, 'useState').mockImplementation(initState =&gt; [initState, setState]);
  
          wrapper = mount(
              &lt;PostFilter handleFilterChange={handleFilterChange} handleSortClick={handleSortClick} total={10} filtered={4} /&gt; 
          );
      });
  
      it("Changing select button should call setState", () =&gt; {
          const select = wrapper.find(".search-type")
          expect(select.instance().value).toBe("title")
          wrapper.find(".search-type").simulate('change', {
              target: {
                  value: "author"
              }
          })
          expect(select.instance().value).toBe("author")
          expect(setState).toHaveBeenCalledTimes(1);
      })
  });
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>console.log src/components/threads/PostFilter.tsx:15
        a
  </code></pre>
  
  <pre><code>    expect(jest.fn()).toHaveBeenCalledTimes(expected)
  
      Expected number of calls: 1
      Received number of calls: 0
  </code></pre>