React 测试库 - 屏幕调试提供与浏览器不同的输出答案

【问题标题】：React Testing Library - Screen debug gives output different from browserReact 测试库 - 屏幕调试提供与浏览器不同的输出
【发布时间】：2020-09-16 10:57:38
【问题描述】：

谁读了这篇文章的好日子。我制作了一个用 typescript 和 redux 编写的 tic-tac-toe 游戏 3x3，我正在尝试编写单元测试。对于这种情况（X 代表玩家 1，O 代表玩家 2）。

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

屏幕应提示获胜者为“玩家一胜” 但是当我打电话给screen.debug() 时，它会抛出消息“玩家 2 转”所以我的测试失败了。

 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 存储中保存的状态存在问题。因为变量gameOver 在我调用screen.debug() 时返回false。

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

【问题讨论】：

标签： reactjs typescript unit-testing react-redux react-testing-library

【解决方案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");

【讨论】：