Reactjs 使用React功能组件中的ref添加测试鼠标事件侦听器

嗨，我有一个功能组件，如下所示：

import React, { useRef, useEffect, useState } from 'react';

const SomeComponent = ({ prop1, ...otherProps}) => {
  const divRef = useRef();

  useEffect(() => {
    divRef.current.addEventListener('mousedown', mouseDownFunc);
  }, []);

  const mouseDownFunc = () => {
    document.addEventListener('mousemove', (el) => {
        // call some parent function
    });
  }

  return (
    <div
        className='test-div'
        ref={ divRef }>
    </div>
  );
};

import React，{useRef，useffect，useState}来自'React'；
const SomeComponent=（{prop1，…otherProps}）=>{
const divRef=useRef（）；
useffect（（）=>{
divRef.current.addEventListener（'mousedown'，mouseDownFunc）；
}, []);
常量mouseDownFunc=（）=>{
document.addEventListener（'mousemove'，（el）=>{
//调用某个父函数
});
}
返回(
);
};

如何测试react功能组件，其中addEventListener是使用useEffect中的ref添加的，触发时调用mouseDownFunc。

---

我不熟悉react jest测试，对如何做有点困惑。

测试这种组件可能很棘手，但使用

@testing library/react

我认为我能够想出一些有用的东西

我确实需要对您的组件进行一些更改，以稍微公开API，并且我还进行了一些更改，以便它停止侦听

mouseup

上的事件，这可能不是您想要的特定事件

以下是修改后的组件：

//MouseDownExample.js
从“React”导入React，{useffect，useState}；
导出默认值（{onMouseMoveWhileDown}）=>{
const[x，setX]=useState（null）；
const[listing，setlisting]=useState（）；
//替换为鼠标移动功能，应确保我们也正在取消收听
useffect（（）=>{
如果（听）{
const onMouseMove=（事件）=>{
//调用某个父函数
onMouseMoveWhileDown（事件）；
console.log（event.clientX）；
//纯粹用于测试目的
setX（event.clientX）；
};
const onMouseUp=（事件）=>{
//不要再听鼠标了
//-你应该选择任何你想停止聆听的事件
//-这是全局的，因此当鼠标在框外时，它也会停止
设置监听（假）；
};
document.addEventListener（“mousemove”，onMouseMove）；
文件。添加了监听器（“mouseup”，onMouseUp）；
return（）=>{
document.removeEventListener（“mousemove”，onMouseMove）；
文件。删除EventListener（“mouseup”，onMouseUp）；
};
}
}，[倾听，在移动的同时下楼]；
返回(
{
//已将此内联移动，因此没有引用
设置监听（真）；
}}
>
X位置：{X}
);
};

我在评论中指出了主要的区别

下面是一个示例测试：

//MouseDownExample.test.js
从“React”导入React；
从“@testing library/react”导入{firevent，render}”；
从“/MouseDownExample”导入MouseDownExample；
它（“当鼠标未按下时，不应在鼠标移动时触发”，（）=>{
const onMouseMoveWhileDown=jest.fn（）；
常量{container}=render(
);
//注意：通常我会使用'screen.getByRole'，但div没有有用的角色
const subject=container.firstChild；
firevent.mouseMove(
文件，
// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent
{
客户：200
}
);
//还没下去呢
expect（onmouse movewhiledown）.not.tohavebeincall（）；
fireEvent.mouseDown（受试者）；
fireEvent.mouseUp（受试者）；
//在移动之前先下降再上升
firevent.mouseMove（文档{
客户：200
});
expect（onmouse movewhiledown）.not.tohavebeincall（）；
});
它（“当鼠标按下时，应在鼠标移动时触发”，（）=>{
const onMouseMoveWhileDown=jest.fn（）；
常量{container}=render(
);
//注意：通常我会使用'screen.getByRole'，但div没有有用的角色
const subject=container.firstChild；
fireEvent.mouseDown（受试者）；
firevent.mouseMove（文档{
客户：200
});
期望（在移动的同时下山）。与(
expect.objectContaining（{clientX:200}）
);
});

这里发生的事情是，我们渲染组件，然后触发事件以确保在我们期望的时候调用

onMouseMoveWhileDown

函数prop

我们必须执行

expect.objectContaining

而不仅仅是对象，因为它是用包含其他属性的

MouseEvent

调用的

我们可能要添加的另一个测试是卸载测试，以确保侦听器不再触发事件

---

您可以使用此组件和测试来查看/试验此功能。希望这对你有帮助你尝试了什么？您使用addEventListener而不是React events的具体原因是什么？如果您对所做的修改有任何问题，lmk和我们可以解决/尝试找出如何在没有更改的情况下进行测试