我正在做一个网页游戏,用户被赋予一个图像,并负责在图像中找到某人或某物。该应用程序的工作原理是检查用户是否点击了图像上的正确位置,并验证鼠标偏移X和鼠标偏移Y是否在一个范围内。
问题是,我在编写这样一个函数的测试时遇到了麻烦,因为我不知道如何模拟鼠标点击位置时的偏移量。
it("validates if the user clicked on the correct spot", async () => {
render(
<MemoryRouter>
<Game imgData={gameImgData} />
</MemoryRouter>
);
const user = userEvent.setup();
const startBtn = screen.getByRole("button", { name: /start/i });
await user.click(startBtn);
const gameImg = screen.getByAltText("game-screen");
await user.click(gameImg);
expect(screen.getByText("You win!")).toBeInTheDocument();
});
这是正在测试的游戏组件的简化版本。
function Game(image){
const checkVictory = (e) => {
if (e.offsetX === 400) {
console.log("You win!")
}
};
return (
<main>
<img src={image.src} alt="game-screen" onClick={checkVictory} />
</main>
);
}
之前,我尝试创建一个带有offset属性的假mouseEvent,我尝试使用fireEvent(gameImg, fakeMouseEvent)
,但也不起作用(运行fireEvent似乎甚至没有调用该函数)。MouseEvent构造函数也不允许我设置offsetX和offsetY。
在react测试库中有没有一种很好的方法来模拟鼠标偏移量?
1条答案
按热度按时间w6lpcovy1#
事件处理程序将传递给SyntheticEvent的示例,
SyntheticEvent
没有offsetX
属性,您应该从nativeEvent
访问offsetX
属性。例如:
Game.tsx
:Game.test.tsx
:测试结果:
软件包版本: