title: How to test function in a react SFC which using hooks?
body: <p><a href="https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks</a></p>
  
  <p>the document show that we should use React DOM to test component.But in many cases, our logical components render another ui component.And maybe the function in logical component will be passed to the ui component as a prop, just like</p>
  
  <pre><code>function Foo(){
    const [count, setCount] = useState(0);
    useEffect(() =&gt; {
      document.title = `You clicked ${count} times`;
    });
    function onChange(value) {
      setCount(value);
    }
    return &lt;Bar value={count} onChange={onChange} /&gt;
  }
  
  function Bar(props){
    const { value, onChange }  = props;
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {value} times&lt;/p&gt;
        &lt;button onClick={() =&gt; onChange(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>In this case, how can I test the <code>onChange()</code> and other functions which can't be obtained in DOM?This is the simplest case. If we use some component library like material-design and ant-design, we usually don't know the DOM structure.</p>