无法模拟自定义对象 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 上被调用