title: React Testing Library - Screen debug gives output different from browser
body: <p>Good day for whom who read this.
  I made a tic-tac-toe game 3x3 written in typescript &amp; redux and I'm trying to write the unit test.
  For the case (X for Player 1, O for Player 2).</p>
  <pre><code>[
    X,X,X
    O,O,'',
    '','',''
  ]
  </code></pre>
  <p>The screen should alert the winner as &quot;Player One Win&quot;
  but when I called the <code>screen.debug()</code> it throws out the message &quot;Player 2 turn&quot; so my test failed.</p>
  <pre><code> test('UTC1 - 0,1,2', async () =&gt; {
    const store = initStore();
    const wrapper = render(
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;);
    const startGameBtn = wrapper.getByText(&quot;Start New Game&quot;);
    userEvent.click(startGameBtn);
    const box0 = screen.getByTestId(&quot;0&quot;);
    userEvent.click(box0);
    const box3 = screen.getByTestId(&quot;3&quot;);
    userEvent.click(box3);
    const box1 = screen.getByTestId(&quot;1&quot;);
    userEvent.click(box1);
    const box4 = screen.getByTestId(&quot;4&quot;);
    userEvent.click(box4);
    const box2 = screen.getByTestId(&quot;2&quot;);
    userEvent.click(box2);
    screen.debug();
    const winnerIsPlayerOne = screen.getByText(&quot;Player One Win&quot;);
    expect(winnerIsPlayerOne).toBeInTheDocument();
  });
  </code></pre>
  <p>but when I test in browser it's totally fine with the message show the Winner.
  Here's my React code of the rendering part</p>
  <pre><code>
          &lt;div className=&quot;tic-tac-board&quot;&gt;
              {renderRows()}
              &lt;div className=&quot;my-3 text-center&quot;&gt;
                  {
                      isGameStarted ? (
                          &lt;div&gt;
                              {
                                  appState.gameOver ?
                                      &lt;div&gt;
                                          &lt;div className=&quot;d-flex&quot;&gt;
                                              {appState.playerOneWin ? &quot;Player One Win&quot; : appState.playerTwoWin ? &quot;Player Two Win&quot; : &quot;&quot;}
                                          &lt;/div&gt;
                                          &lt;button onClick={() =&gt; dispatch(startNewGame())}&gt;Restart game&lt;/button&gt;
                                      &lt;/div&gt;
                                      :
                                      !isPlayerOneTurn ? &quot;Player 2 turn&quot; : &quot;Player 1 turn&quot;
                              }
                          &lt;/div&gt;) : &lt;button onClick={() =&gt; startGame()}&gt;Start New Game&lt;/button&gt;
                  }
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>I think there's a problem with the states saved in Redux store. As the variable <code>gameOver</code> by the time I called <code>screen.debug()</code> returns false.</p>
  <p>How can I know that this variable is updated in the reducer or is there another alternative solution?
  I'd be appreciated if there are any suggestions.</p>