Jest.js 如何在测试过程中模拟鼠标位置和鼠标偏移属性？

eqoofvh9 于 2023-04-27 发布在 Jest

关注(0)|答案(1)|浏览(143)

我正在做一个网页游戏，用户被赋予一个图像，并负责在图像中找到某人或某物。该应用程序的工作原理是检查用户是否点击了图像上的正确位置，并验证鼠标偏移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测试库中有没有一种很好的方法来模拟鼠标偏移量？

jestjs

来源：https://stackoverflow.com/questions/76106321/how-to-simulate-mouse-position-and-mouse-offset-properties-during-testing

1条答案

按热度按时间

w6lpcovy1#

事件处理程序将传递给SyntheticEvent的示例，SyntheticEvent没有offsetX属性，您应该从nativeEvent访问offsetX属性。
例如：
Game.tsx：

import React from "react";

export function Game(props) {
  const checkVictory = (e: React.MouseEvent) => {
    if (e.nativeEvent.offsetX === 400) {
      console.log('You win!');
    }
  };

  return (
    <main>
      <img src={props.src} alt="game-screen" onClick={checkVictory} />
    </main>
  );
}

Game.test.tsx：

import { render, screen, fireEvent } from '@testing-library/react';
import { Game } from './Game';
import React from 'react';

describe('76106321', () => {
  it('validates if the user clicked on the correct spot', async () => {
    render(<Game src="" />);
    const gameImg = screen.getByAltText('game-screen');
    const event = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
    });

    Object.defineProperty(event, 'offsetX', { value: 400 });
    fireEvent(gameImg, event);
  });
});

测试结果：

PASS  stackoverflow/76106321/Game.test.tsx (6.51 s)
  76106321
    ✓ validates if the user clicked on the correct spot (31 ms)

  console.log
    You win!

      at checkVictory (stackoverflow/76106321/Game.tsx:6:15)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.786 s, estimated 7 s

软件包版本：

"@testing-library/react": "^11.2.7",
"react": "^16.14.0",
"react-dom": "^16.14.0",

赞(0）回复(0）举报 2023-04-27

我来回答

Jest.js 如何在测试过程中模拟鼠标位置和鼠标偏移属性？

1条答案

相关问题

热门标签

最新问答