title: How to use ReactTestUtils to Simulate onChange event to update State
body: <p>I want to run unit tests on a simple score keeping component in React. My component has two State values, <code>score</code> and <code>newPoints</code>. An input element specifies the <code>newPoints</code> to add, and a button adds that to the <code>score</code>.</p>
  <p><a href="https://i.stack.imgur.com/h2Xte.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h2Xte.png" alt="Score keeping component" /></a></p>
  <p>Game.js:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  function Game() {
    const [score, setScore] = useState(0);
    const [newPoints, setNewPoints] = useState(0);
  
    const AddPoints = (numPins) =&gt; {
      setScore(score + numPins);
    };
  
    const handlePointsChange = (event) =&gt; {
      console.log(event.target.valueAsNumber); // value received is 3
      setNewPoints(event.target.valueAsNumber);
    };
  
    const handleAdd = () =&gt; {
      console.log(newPoints); // newPoints is still 0
      AddPoints(newPoints);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Game&lt;/h1&gt;
        &lt;p id=&quot;ScoreLabel&quot;&gt;Score:{score}&lt;/p&gt;
        &lt;input
          id=&quot;PointsInput&quot;
          type=&quot;number&quot;
          onChange={handlePointsChange}
          value={newPoints}
        /&gt;
        &lt;button id=&quot;AddButton&quot; onClick={handleAdd}&gt;
          Add
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Game;
  </code></pre>
  <p><strong>Problem:</strong> The component works fine in my browser but I can't seem to get the unit tests working.</p>
  <p>The <code>ReactTestUtils.Simulate</code> function in the test script successfully calls my component's <code>handlePointsChange</code> and the <code>valueAsNumber</code> received is correct. However, when my test script simulates a mouse click via <code>dispatchEvent</code>, the value of <code>newPoints</code> in <code>handleAdd</code> is still zero. It seems as though the value of <code>newPoints</code> state hasn't been updated yet, even after calling <code>setNewPoints</code></p>
  <p>Game.test.js</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import ReactTestUtils from &quot;react-dom/test-utils&quot;; // ES6
  import { act } from &quot;react-dom/test-utils&quot;;
  import Game from &quot;./Game&quot;;
  
  let container;
  let scoreLabel;
  let pointsInput;
  let addButton;
  
  beforeEach(() =&gt; {
    container = document.createElement(&quot;div&quot;);
    document.body.appendChild(container);
    act(() =&gt; {
      ReactDOM.render(&lt;Game /&gt;, container);
    });
    scoreLabel = container.querySelector(&quot;#ScoreLabel&quot;);
    pointsInput = container.querySelector(&quot;#PointsInput&quot;);
    addButton = container.querySelector(&quot;#AddButton&quot;);
  });
  afterEach(() =&gt; {
    document.body.removeChild(container);
    container = null;
    scoreLabel = null;
    addButton = null;
  });
  
  it(&quot;Add 3 points, Score should be 3&quot;, () =&gt; {
    act(() =&gt; {
      ReactTestUtils.Simulate.change(pointsInput, {
        target: { valueAsNumber: 3 },
      });
      addButton.dispatchEvent(new MouseEvent(&quot;click&quot;, { bubbles: true }));
    });
    expect(scoreLabel.textContent).toBe(&quot;Score:3&quot;);
  });
  
  </code></pre>
  <p>Console log:</p>
  <pre><code>FAIL  src/Game.test.js
    ● Console
  
      console.log
        3
  
        at handlePointsChange (src/Game.js:12:13)
  
      console.log
        0
  
        at handleAdd (src/Game.js:17:13)
  
    ● Add 3 points, Score should be 3
  
      expect(received).toBe(expected) // Object.is equality
  
      Expected: &quot;Score:3&quot;
      Received: &quot;Score:0&quot;
  </code></pre>
  <p>Could anyone point me in the right direction to get this unit test to work?</p>