title: React-testing-library: changes due to input
body: <p>I'm trying to test that a component updates as it should due to changes in an input element. I use the <code>fireEvent.change()</code>-function, and if I then check the value of the node I found using <code>getByPlaceholderText</code> it has updated as it should. However I cannot see the changes in the react component itself.</p>
  
  <p>This might be because the changes don't happen until a rerender; how would I test this? react-testing-library's <code>rerender</code> appears to start the component "from scratch" (i.e. without the new input value), and <code>waitForElement</code> never finds what it's waiting for.</p>
  
  <p>Here's the component TestForm.js:</p>
  
  <pre><code>import React from 'react';
  import { withState } from 'recompose';
  
  const initialInputValue = 'initialInputValue';
  
  const TestForm = ({ inputValue, setInputValue }) =&gt; (
    &lt;&gt;
      {console.log('inputValue', inputValue)}
      &lt;input value={inputValue} onChange={(e) =&gt; setInputValue(e.target.value)} placeholder="placeholder" /&gt;
      {inputValue !== initialInputValue &amp;&amp; &lt;div&gt;Input has changed&lt;/div&gt;}
    &lt;/&gt;
  );
  
  export default withState('inputValue', 'setInputValue', initialInputValue)(TestForm);
  </code></pre>
  
  <p>And here's the test, run using <code>npx jest test.js</code>:</p>
  
  <pre><code>import React from 'react';
  import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';
  
  import TestForm from './TestForm';
  
  afterEach(cleanup);
  
  describe('TestForm', () =&gt; {
    it('Change input', async () =&gt; {
      const { getByPlaceholderText, getByText } = render(&lt;TestForm /&gt;);
      const inputNode = getByPlaceholderText('placeholder');
      fireEvent.change(inputNode, { target: { value: 'new value' } });
      console.log('inputNode.value', inputNode.value);
      await waitForElement(() =&gt; getByText('Input has changed'));
    });
  });
  </code></pre>