title: How to test react component correctly?
body: <p>Recently I am learning to test React with jest and enzyme, It seems hard to understand what a unit test is it, my code</p>
  
  <pre><code>import React from "react";
  
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        value: ""
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
      const value = e.target.value;
      this.setState({
        value
      });
    }
    render() {
      return &lt;Nest value={this.state.value} handleChange={this.handleChange} /&gt;;
    }
  }
  
  export const Nest = props =&gt; {
    return &lt;input value={props.value} onChange={props.handleChange} /&gt;;
  };
  
  export default App;
  </code></pre>
  
  <p>and my test</p>
  
  <pre><code>import React from "react";
  import App, { Nest } from "./nest";
  
  import { shallow, mount } from "enzyme";
  
  it("should be goood", () =&gt; {
    const handleChange = jest.fn();
    const wrapper = mount(&lt;App /&gt;);
    wrapper.find("input").simulate("change", { target: { value: "test" } });
    expect(handleChange).toHaveBeenCalledTimes(1);
  });
  </code></pre>
  
  <p>IMO, the mocked <code>handleClick</code> will intercept the <code>handleClick</code> on <code>App</code>,</p>
  
  <p>if this is totally wrong, what's the right way to use mock fn and test the <code>handleClick</code> be called.</p>
  
  <p><strong>Another</strong>: I search a lot, read the similar situations, seem like this is<code>contra-Unit Test</code>,<br>
  Probably I should test the two component separately, I can test both components,
  test the<br>
  <code>&lt;Nest value={value} handleChange={handleChange} /&gt;</code><br>
  by pass the props manually, and then <code>handleChange</code>invoked by simulate <code>change</code><br>
  it passed test.<br>
  but how can I test the connection between the two? 
  I read  </p>
  
  <blockquote>
    <p>some work is React Team's Work
    ...</p>
  </blockquote>
  
  <p>I don't know which parts I have to test in this case, and Which parts <code>react</code> already tested and don't need me to test. That's confusing.</p>