如何解决反应测试库-屏幕调试提供与浏览器不同的输出
读这本书的人的好日子。 我制作了一个用打字稿和Redux编写的井字游戏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中已更新,或者还有其他替代解决方案? 如果有任何建议,我将不胜感激。
解决方法
好的,所以我找到了一个解决方案,因为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");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。