Reactjs 使用Ezyme，模拟keydown事件在事件动态添加到元素的元素上不起作用

我有一个工作非常好的组件，我正试图用jest和Ezyme编写一些测试

const handleEvent = (e: KeyboardEvent) => {
    if(e.keyCode === 27)
      console.log('Escape event');
}
const Component = () => {    
    const ref = useRef(null);
    useEffect(() => {
        ref.current?.addEventListener('keydown', handleEvent);
        return () => {
            ref.current?.removeEventListener('keydown', handleEvent);
        }
    }, []);
    return (
         <div ref={ref}> Some inner elements </div>
    )
}

consthandleevent=（e:KeyboardEvent）=>{
如果（例如keyCode===27）
console.log（“转义事件”）；
}
常量组件=（）=>{
const ref=useRef（null）；
useffect（（）=>{
参考当前？.addEventListener（'keydown'，handleEvent）；
return（）=>{
参考当前？.removeEventListener（'keydown'，handleEvent）；
}
}, []);
返回(
一些内在因素
)
}

这是我试图模拟逃逸事件的测试

it('simulate escape event', () => {
    const component = mount(<Component />);
    component.simulate('keydown', { keyCode: 27 });
    // assertion of things that are handled on escape
});

it（'simulate escape event'，（）=>{
const component=mount（）；
component.simulate（'keydown'，{keyCode:27}）；
//对转义时处理的事物的断言
});

这不会触发转义事件。但是，当我将事件处理程序直接连接到dom上的组件时，相同的测试是模拟转义事件，并且似乎工作正常

const handleEvent = (e: KeyboardEvent) => {
   if(e.keyCode === 27)
     console.log('Escape event');
}
const Component = () => {    
   const ref = useRef(null);
   return (
        <div ref={ref} onKeyDown={handleEvent}> Some inner elements </div>
   )
}

consthandleevent=（e:KeyboardEvent）=>{
如果（例如keyCode===27）
console.log（“转义事件”）；
}
常量组件=（）=>{
const ref=useRef（null）；
返回(
一些内在因素
)
}

有人能告诉我为什么当事件动态附加到组件时simulate不起作用，但当直接将其添加到dom时却可以正常工作吗？我试图在各种文章中搜索这个术语，但什么也找不到。

---

提前感谢。

酶模拟的工作原理类似于。模拟（“单击”）实际上查找onClick函数并将参数传递给它，没有“实际”的单击

所以酵素不会在直接添加的事件上模拟触发器…你可能必须自己去调度事件

getDOMNode（）获取DOM节点，dispatchEvent应在该节点上工作。像下面这样

it（'simulate escape event'，（）=>{
const component=mount（）；
const event=新事件（'keydown'）；
event.keyCode=27；
component.getDOMNode（）.dispatchEvent（事件）；
//对转义时处理的事物的断言
});

我看到的另一个问题是依赖关系数组的使用效果。 删除useEffect中的空数组依赖项，以在dom元素有时在react重新呈现之间更改时保持安全

useffect（（）=>{
参考当前？.addEventListener（'keydown'，handleEvent）；
return（）=>{
参考当前？.removeEventListener（'keydown'，handleEvent）；
}
});

您仅在装载组件时附加eventHandler

但是DOM元素可能会在react呈现之间发生变化，因此您应该在react生命周期中的react呈现和DOM更新后触发的所有useEffects中实际附加eventListener

如果您认为DOM元素会有一些昂贵的东西，并且不希望它在每个useEffects上运行，那么您也可以依赖它

对于仅附加事件侦听器，不带依赖项数组的useEffect应该可以