React 测试库 - 屏幕调试给出与浏览器不同的输出

Question

美好的一天，谁读了这篇文章。我制作了一个用打字稿和 redux 编写的 3x3 井字游戏，我正在尝试编写单元测试。对于这种情况（X 代表玩家 1，O 代表玩家 2）。

[
  X,X,X
  O,O,'',
  '','',''
]

屏幕应提醒获胜者为“玩家一胜” 但是当我调用 screen.debug() 时，它会抛出消息“Player 2 turn”，所以我的测试失败了。

 test('UTC1 - 0,1,2', async () => {
  const store = initStore();
  const wrapper = render(
    <Provider store={store}>
      <App />
    </Provider>);
  const startGameBtn = wrapper.getByText("Start New Game");
  userEvent.click(startGameBtn);
  const box0 = screen.getByTestId("0");
  userEvent.click(box0);
  const box3 = screen.getByTestId("3");
  userEvent.click(box3);
  const box1 = screen.getByTestId("1");
  userEvent.click(box1);
  const box4 = screen.getByTestId("4");
  userEvent.click(box4);
  const box2 = screen.getByTestId("2");
  userEvent.click(box2);
  screen.debug();
  const winnerIsPlayerOne = screen.getByText("Player One Win");
  expect(winnerIsPlayerOne).toBeInTheDocument();
});

但是当我在浏览器中测试时，显示获胜者的消息完全没问题。这是我的渲染部分的 React 代码


        <div className="tic-tac-board">
            {renderRows()}
            <div className="my-3 text-center">
                {
                    isGameStarted ? (
                        <div>
                            {
                                appState.gameOver ?
                                    <div>
                                        <div className="d-flex">
                                            {appState.playerOneWin ? "Player One Win" : appState.playerTwoWin ? "Player Two Win" : ""}
                                        </div>
                                        <button onClick={() => dispatch(startNewGame())}>Restart game</button>
                                    </div>
                                    :
                                    !isPlayerOneTurn ? "Player 2 turn" : "Player 1 turn"
                            }
                        </div>) : <button onClick={() => startGame()}>Start New Game</button>
                }

            </div>
        </div>

我认为保存在 Redux 存储中的状态有问题。由于我调用screen.debug()时的变量gameOver returns false.

我怎么知道这个变量在 reducer 中更新了或者有其他替代解决方案？如果有任何建议，我将不胜感激。

Answer 1

好吧，所以我找到了解决方案，因为 DOM 更新是异步的，所以我不得不改变方法

   const winnerIsPlayerOne = screen.getByText("Player One Win");
   expect(winnerIsPlayerOne).toBeInTheDocument();

至

  const winnerIsPlayerOne = await wrapper.findByText(/player 1 win/i);
  expect(winnerIsPlayerOne.innerHTML).toEqual("Player 1 Win");

React 测试库 - 屏幕调试给出与浏览器不同的输出

React Testing Library - Screen debug gives output different from browser

unit-testing

typescript

reactjs

react-redux

react-testing-library