title: How to test functions in React with Jest and Enzyme
body: <p>I have a react component called Contact which in turn has a child component called Header.I am passing a function into my Header component called <strong>handleButtonClick()</strong> . The function is called in the component like this :</p>
  
  <pre><code>&lt;Header  handleButtonClick={this.openPopup} &gt;
  </code></pre>
  
  <p>and the openPopup() function is defined in the Contact component as shown below:</p>
  
  <pre><code>openPopup = () =&gt; this.setState({ popupOpen: true });
  </code></pre>
  
  <p>So, I am trying to test this function using jest and Enzyme:</p>
  
  <pre><code>it("calls the `openPopup` function", () =&gt; {
          const onMockFunction = jest.fn();
          const comp = shallow(
              &lt;SparkTheme&gt;
                  &lt;Contact handleButtonClick={onMockFunction} /&gt;
              &lt;/SparkTheme&gt;
          );
          comp.find(Header).simulate("change");
          expect(onMockFunction).toBeCalledTimes(1);
  });
  </code></pre>
  
  <p>So, when I run this test I get an error saying:</p>
  
  <pre><code>Method “simulate” is only meant to be run on a single node. 0 found instead.
  </code></pre>
  
  <p>What is the issue?Can anyone please help me with this?</p>
  
  <p><strong>NOTE:</strong> Also, if I have another function which takes some parameters as shown below,</p>
  
  <pre><code>setValue = e =&gt; this.setState({ value: e.target.value });
  </code></pre>
  
  <p>then how do i write the test case.Should it be something like: </p>
  
  <pre><code>comp.find(Header).simulate("change", event);
  </code></pre>
  
  <p>I am not able to check as its failing. please guide me in this.</p>
  
  <p><strong>EDIT 1:</strong> After doing comp.debug(), the output I get is: </p>
  
  <pre><code>&lt;div&gt;
          &lt;Header contactCount={3} handleButtonClick={[Function: bound ]} buttonText="View all"&gt;
            Site Contact From HTML
          &lt;/Header&gt;
          &lt;ContactList name="displayContacts" data={{...}} /&gt;
          &lt;Popup open={false} onRequestClose={[Function: bound ]}&gt;
            &lt;styled.h3&gt;
              Contacts
            &lt;/styled.h3&gt;
            &lt;SearchBar onRequestClear={[Function: bound ]} setValue={[Function: bound ]} value="" /&gt;
            &lt;styled.div&gt;
              &lt;ContactList hasLeftPadding={true} popupDisplay={true} data={{...}} /&gt;
            &lt;/styled.div&gt;
          &lt;/Popup&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>And the error message i get now after writing as:</p>
  
  <pre><code>comp
              .dive()
              .find(Header)
              .prop("handleButtonClick")({ target: { value: "someValue" } });
  </code></pre>
  
  <p>is:</p>
  
  <pre><code>TypeError: ShallowWrapper::dive() can not be called on Host Components
  </code></pre>