无法模拟自定义对象addEventListener(e)

Question

嗨，我在嘲笑自定义创建的对象addEventListener时遇到了问题。下面是我的反应渲染代码

<Fragment>
<div
className={`${Styles.resizable} resizable`}
ref={resizableRef}
style={{ width: width, height: height }}
>
<div className={`${Styles.resizable_resizers} resizers`}>
<div
className={`${Styles.resizable_resizers_resizer} ${Styles[resizeDirection]} resizer ${resizeDirection}`}
></div>
{children}
</div>
{maxCharacter !== null ? (
<div className={`${Styles.resizable__limit}`}>
{characterCount} / {maxCharacter}
</div>
) : null}
</div>
</Fragment>

在React钩子中使用useLayoutEffect-我正在操作DOM

const resizers = resizableRef.current.querySelectorAll(".resizable .resizer");
for (let i = 0; i < resizers.length; i++) {
const currentResizer = resizers[i];
const resize = (e) => {
if (currentResizer.classList.contains("bottomright")) {
resizableRef.current["style"].width =
e.pageX - resizableRef.current.getBoundingClientRect().left + "px";
resizableRef.current["style"].height =
e.pageY - resizableRef.current.getBoundingClientRect().top + "px";
} else if (currentResizer.classList.contains("vertical")) {
resizableRef.current["style"].height =
e.pageY - resizableRef.current.getBoundingClientRect().top + "px";
} else if (currentResizer.classList.contains("horizontal")) {
resizableRef.current["style"].width =
e.pageX - resizableRef.current.getBoundingClientRect().left + "px";
}
};
const stopResize = () => {
window.removeEventListener("mousemove", resize);
};
currentResizer.addEventListener("mousedown", (e) => {
e.preventDefault();
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
}
}, []);

我正在为上面的代码编写单元测试用例，但似乎currentResizer.addEventListener("mousedown"，(e(=>{…}(没有被嘲笑，我无法继续前进。任何帮助都将不胜感激。

Answer 1

您应该嘲笑resize和stopResize，而不是currentResizer。原因：

• 您不应该测试实现细节，而应该关注功能。如果您测试您的实现，那么在更改代码的那一刻，您的测试就中断了。但如果您正在测试功能，它不会崩溃
• 在酶和笑话中，功能成分的技术模拟方法和特性还不可用。对于类组件，我们可以使用它wrapper.instance().method=jest.fn()。但我们不能在功能组件中做到这一点

问题的一个解决方案是修改组件代码以接受resize和stopResize方法作为道具。然后在测试中嘲笑他们。检查他们是否在mousemove和mouseup 上被调用