测试mousedown事件

Question

我有一个反应代码，这是拖动和调整div的高度，它工作得很好，可点击的div是大小，我需要写一个单元测试，以测试事件侦听器是否被调用

useEffect(() => {
    let mousePosition;
    retriveAgentHistoryHeight();
    const panel = dragableElement?.current as HTMLElement;
    const resizerEle = resizer?.current as HTMLElement;

    const setPanelHeight = dx => {
      const newHeight = `${parseInt(getComputedStyle(panel, '').height) + dx}px`;
      panel.style.height = newHeight;
      saveAgentHistoryHeight(newHeight);
    };

    const resize = e => {
      const dx = mousePosition - e.y;
      mousePosition = e.y;
      setPanelHeight(dx);
    };

    const touchResizeEvent = e => {
      const y = parseInt(e.touches[0].clientY);
      const dx = mousePosition - y;
      mousePosition = y;
      setPanelHeight(dx);
    };

    const mouseOnPressEvent = e => {
      mousePosition = e.y;
      document.addEventListener('mousemove', resize, false);
      setResizeClass('active');
      panel.style.userSelect = 'none';
    };

    const screenTouchEvent = e => {
      mousePosition = parseInt(e.touches[0].clientY);
      document.addEventListener('touchmove', touchResizeEvent);
      setResizeClass('active');
      panel.style.userSelect = 'none';
    };

    const mouseOnReleaseEvent = () => {
      document.removeEventListener('mousemove', resize, false);
      setResizeClass('');
      panel.style.userSelect = 'auto';
    };

    const screenTouchEndEvent = () => {
      document.removeEventListener('touchmove', touchResizeEvent);
      setResizeClass('');
      panel.style.userSelect = 'auto';
    };

    if (resizerEle) {
      resizerEle.addEventListener('mousedown', mouseOnPressEvent);
      document.addEventListener('mouseup', mouseOnReleaseEvent);
      resizerEle.addEventListener('touchstart', screenTouchEvent);
      document.addEventListener('touchend', screenTouchEndEvent);
    }

    return () => {
      if (resizerEle) {
        resizerEle.removeEventListener('mousedown', mouseOnPressEvent);
        document.removeEventListener('mouseup', mouseOnReleaseEvent);
        resizerEle.removeEventListener('touchstart', screenTouchEvent);
        document.removeEventListener('touchend', screenTouchEndEvent);
      }
    };
  }, []);

我的test.js

 it('should load verify load event of resizer on mouse release', async () => {
        const {getByTestId } = render(<ContactHistoryHandledByAgent />);
        const mouseOnPressEvent = jest.fn(a => a);
        fireEvent.mouseUp(getByTestId('agent-history-resizer'));
        expect(mouseOnPressEvent).toBeCalled();
    })

expect(mouseOnPressEvent).toBeCalled()；不工作

我想检查是否调用了mouseOnPressEvent之类的事件

Answer 1

您可以将jest.fn()赋给一个常量，并将其作为事件参数传递给组件。然后使用simulate(event)方法指定将在测试期间发生的事件。并在最后检查它是否被调用。

下面是一个onClick测试的示例：

 const onclick = jest.fn();
 const component = render(<ContactHistoryHandledByAgent onClick={onclick} />);
 component.simulate("click");
 expect(onclick).toHaveBeenCalled();