title: Test text input with react and jest
body: <p>I have a simple <a href="https://github.com/runjak/spreadshirtRemoteTask/blob/master/src/Searchbar.js" rel="noreferrer">SearchBar</a> component in a small test project of mine.
  This SearchBar consists mainly of a text input and a button,
  where the button click executes a callback with the text from the input field.</p>
  
  <p>My <a href="https://github.com/runjak/spreadshirtRemoteTask/blob/master/src/Searchbar.js#L23-L42" rel="noreferrer">Searchbar.render</a> method looks like this:</p>
  
  <pre><code>  return (
      &lt;FormGroup controlId="keywords"&gt;
        &lt;InputGroup&gt;
          &lt;FormControl type="text"
                       placeholder="Keywords…"
                       value={this.state.keywords}
                       onChange={this.updateKeywords} /&gt;
          &lt;InputGroup.Button
            onClick={() =&gt; {this.props.onSearch(this.state.keywords);}}
            ref="searchInput"&gt;
            &lt;Button ref="searchButton"&gt;
              &lt;Glyphicon glyph="search"/&gt;
            &lt;/Button&gt;
          &lt;/InputGroup.Button&gt;
        &lt;/InputGroup&gt;
      &lt;/FormGroup&gt;
    );
  </code></pre>
  
  <p>I've written a <a href="https://github.com/runjak/spreadshirtRemoteTask/blob/master/src/Searchbar.test.js#L13-L34" rel="noreferrer">test</a> for it using jest:</p>
  
  <pre><code>it("should adjust keywords and trigger onSearch correctly", () =&gt; {
    const handleSearch = jest.fn();
  
    const searchBar = ReactTestUtils.renderIntoDocument(
      &lt;Searchbar onSearch={handleSearch}/&gt;
    );
    expect(searchBar.state.keywords).toBe("");
  
    const button = ReactDOM.findDOMNode(searchBar.refs.searchButton);
    const input = ReactDOM.findDOMNode(searchBar.refs.searchInput);
  
    ReactTestUtils.Simulate.change(input, {target: {value: "test"}});
  
    ReactTestUtils.Simulate.click(button);
    expect(handleSearch).toHaveBeenCalledWith("test");
  });
  </code></pre>
  
  <p>Now the callback in this test works and the function stored in <code>callMe</code> get's called as expected. The <code>SearchBar</code> also works in my application so I think that the <code>SearchBar</code> code is correct. But when I use <code>npm test</code> to run my tests the test fails with:</p>
  
  <pre><code>expect(jest.fn()).toHaveBeenCalledWith(expected)
  
  Expected mock function to have been called with:
    ["test"]
  But it was called with:
    [""]
  </code></pre>
  
  <p>In the comments <a href="https://stackoverflow.com/users/184883/andreas-k%C3%B6berle">Andreas Köberle</a> pointed me to the problem that the <code>updateKeywords</code> method appears to not be called which should be the reason for the failing test. Sadly I cannot figure out why this method isn't called in the test.</p>