reactjs 是否可以在React中测试文档中附加的mousemove事件？

z9ju0rcb 于 2023-04-20 发布在 React

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

我有一个mousemove事件附加到文档中。是否可以用Enzyme或RTL或任何其他库测试它？问题是它不是一个react合成事件，所以它不会在测试中触发...

<div onMouseDown={handleMouseDown}>Element</div>

const handleMouseDown = () => {
    document.addEventListener("mousemove", handleMouseMove);
};

const handleMouseMove = ({ clientX }) => {
    console.log(clientX)
};

reactjs

来源：https://stackoverflow.com/questions/76052957/is-it-possible-to-test-mousemove-events-attached-on-document-in-react

1条答案

按热度按时间

wh6knrhe1#

这是不可能的，因为它们被设计为只与React合成事件一起工作。
您仍然可以通过使用RTL中的fireEvent方法或Enzyme中的simulate方法模拟鼠标移动来测试mousemove事件的行为。

import React from 'react';
import { mount } from 'enzyme';

describe('MouseEventExample', () => {
  it('should trigger mousemove event on document when onMouseDown is fired', () => {
    const handleMouseMove = jest.fn();
    const wrapper = mount(
      <div onMouseDown={() => {
        document.addEventListener('mousemove', handleMouseMove);
      }}>
        Element
      </div>
    );
    wrapper.find('div').simulate('mousedown');
    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 50 }));
    expect(handleMouseMove).toHaveBeenCalled();
  });
});

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

我来回答

reactjs 是否可以在React中测试文档中附加的mousemove事件？

1条答案

相关问题

热门标签

最新问答