title: Is it possible that fireEvent.click from @testing-library/react re-renders the component with its initial state?
body: <p>I have a React Component (Comp) with an input element and a button element. I wrote a test to verify that empty input is parsed correctly.</p>
  
  <p>Problem:</p>
  
  <p>1) input's value is assigned to be "" (input has <code>onChange={ e =&gt; this.setState({ inputValue: e.target.value }) }</code>)</p>
  
  <p>2) <code>fireEvent.click(container.querySelector('#calculateButton'))</code> is called</p>
  
  <p>^note: button has <code>onClick={e =&gt; this.onCalculateButtonClick(e)}</code>, which obtains inputValue from state</p>
  
  <p>3) <code>userInput.split(',')</code> is invoked inside of<code>onCalculateButtonClick</code></p>
  
  <p>4) An exception is thrown: <strong>TypeError: userInput.split is not a function</strong> because userInput is 0 (a number).</p>
  
  <p>The only way I can explain this is if somehow fireEvent.click reset Component's state to it's default (inputValue: 0)</p>
  
  <p>Here's the code:</p>
  
  <pre><code>class Comp extends React.Component {
      constructor() {
          super();
          this.state = {
              inputValue: 0,
              calculationResult: '',
          };
      }
      onCalculateButtonClick = function(event) {
          const userInput = this.state.inputValue; // this is 0 after fireEvent.click is called
          const tokenizedInput = userInput.split(',').map(element =&gt; { // exception thrown here
      ...
      }
      render() {
          return (
              &lt;div className="Comp"&gt;
      ...
                          &lt;input
                              id="userInput"
                              type="text"
                              onChange={ e =&gt; this.setState({ inputValue: e.target.value }) }
                          /&gt;
      ...
                      &lt;button
                          id="calculateButton"
                          onClick={e =&gt; this.onCalculateButtonClick(e)}
                      &gt;
                          Calculate
                      &lt;/button&gt;
      }
  }
  
  </code></pre>
  
  <p>And the test (jest):</p>
  
  <pre><code>test('empty input returns 0', () =&gt; {
      const { container } = render(&lt;Calculator /&gt;);
      const inputElement = container.querySelector('#userInput');
      fireEvent.change(inputElement, { target: { value: '' } }); // after this line, inputElement is ''
      fireEvent.click(container.querySelector('#calculateButton')); // throws exception here from inputElement being 0??
      const outputElement = container.querySelector('#calculationResult');
      expect(outputElement.innerHTML).toBe('0');
  });
  </code></pre>
  
  <p>I have no idea why fireEvent.change would cause my state's inputValue property to be 0 - would love to understand what's going on here. Tried to be as clear as possible, let me know if anything is still unclear. Thanks!</p>