问如何在反应测试(JEST)中测试鼠标clientY
EN

Stack Overflow用户

提问于 2022-12-01 22:50:52

回答 2查看 40关注 0票数 0

useEffect(() => {
    const maybeHandler = (event: MouseEvent) => {
      menuData.forEach((el) => {
        if (el.hasActiveDropdown && event.clientY > 50) {
          handleCloseDropDown();
          // handleDropDown('0');
        }
      });
    };
    document.addEventListener('mousedown', maybeHandler);
    return () => document.removeEventListener('mousedown', maybeHandler);
  }, [handleCloseDropDown, menuData]);

我用这个useEffect来处理肚脐组件中的多个下垂，肚脐有固定的高度50 in，所以我的逻辑是当使用时点击肚脐外面的下坠都是接近的。

我很难在开玩笑中测试这个clientY特性

javascript

reactjs

jestjs

react-testing-library

平台电商解决方案

为客户提供电商客服、电商图片系统识别及搜索的快速搭建方案

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-12-01 23:41:23

如果要用Jest中的useEffect属性测试clientY钩子，可以考虑使用Jest的spyOn和spyOn函数来模拟文档对象上的addEventListener和removeEventListener方法，然后在传递给事件处理程序的模拟MouseEvent对象中指定clientY属性的返回值。

下面是一个如何做到这一点的例子：

const maybeHandler = jest.fn();

const mockAddEventListener = jest.spyOn(document, 'addEventListener');
const mockRemoveEventListener = jest.spyOn(document, 'removeEventListener');

useEffect(() => {
  maybeHandler(new MouseEvent('mousedown', {
    clientY: 100, // specify the return value for the clientY property
  }));

  document.addEventListener('mousedown', maybeHandler);

  return () => {
    document.removeEventListener('mousedown', maybeHandler);
  };
}, []);

// assert that the event listener was added and removed
expect(mockAddEventListener).toHaveBeenCalledWith('mousedown', maybeHandler);
expect(mockRemoveEventListener).toHaveBeenCalledWith('mousedown', maybeHandler);

// assert that the event handler was called
expect(maybeHandler).toHaveBeenCalled();

// assert the value of the clientY property in the mocked MouseEvent object
expect(maybeHandler.mock.calls[0][0].clientY).toBe(100);

然后，您可以在测试用例中使用这个模拟事件处理程序来测试使用useEffect钩子的组件的逻辑。

票数 0

Stack Overflow用户

发布于 2022-12-02 00:22:23

对于我的项目，我基本上有一个函数，当滚动发生时检测到，这个项目处于React中

window.addEventListener('wheel', onScroll);
window.addEventListener('touchstart', handleTouchStart);        
window.addEventListener('touchmove', handleTouchMove);

它会回onScroll

    function onScroll(e:any)   {
        if(Math.abs(e.deltaY) <= 35 || Scrolled) return;
        Scrolled = true;
        //console.log(e.deltaY);
        let direction = e.deltaY;
        //console.log(page);

        if(direction > 0) page++;
        if(direction < 0) page--;

        //console.log(page);

        if(page <= 0) page = (0);
        if(page >= (pagesRef.current.length-1)) page = (pagesRef.current.length-1);

        pagesRef.current[page].scrollIntoView({behavior: "smooth"});
        setTimeout(()=>{Scrolled=false},800);
    }

以及触控/移动设备

    function handleTouchStart(evt:any) {
        const firstTouch = getTouches(evt)[0];                                      
        xDown = firstTouch.clientX;                                      
        yDown = firstTouch.clientY;                                      
    };                                                
                                                                             
    function handleTouchMove(evt:any) {
        if ( ! xDown || ! yDown ) {
            return;
        }
    
        var xUp = evt.touches[0].clientX;                                    
        var yUp = evt.touches[0].clientY;
    
        var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;
                                                                             
        if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
            if ( xDiff > 0 ) {
                /* right swipe */ 
            } else {
                /* left swipe */
            }                       
        } else {
            if ( yDiff > 0 ) {
                page++;
            } else { 
                page--;
            }                                                                 
        }

        if(page <= 0) page = (0);
        if(page >= (pagesRef.current.length-1)) page = (pagesRef.current.length-1);

        pagesRef.current[page].scrollIntoView({behavior: "smooth"});

        /* reset values */
        xDown = null;
        yDown = null;                                             
    };