Question

我试图使用react开发File拖放组件，但是在编写测试用例时遇到了麻烦。我在网上浏览了两个网站，但无法取得任何进展

这是我写的拖放组件- 它基本上会监听4个事件，并调用适当的功能

const DragAndDropFile: React.FC<IProps> = ({ handleFileDrop, content, fileType }) => {
  const [dragging, setDragging] = useState(false);
  const [supportedFileTypeError, setSupportedFileTypeError] = useState(false);
  const [t] = useTranslation();
  let dragCounter: number;
  console.log('ll');
  // preventDefault  prevents the default behavior of the browser when something is dragged in or dropped (e.g. open the file )
  // stopPropagation stops the event from being propagated through parent and child elements
  const handleDrag = (e: DragEvent) => {
    console.log('heref');
    e.preventDefault();
    e.stopPropagation();
  };
  const handleDragIn = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter++;
    setSupportedFileTypeError(false);
    if (e.dataTransfer && e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setDragging(true);
    }
  };
  const handleDragOut = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter--;
    if (dragCounter > 0) {
      return;
    }
    setDragging(false);
  };
  const handleDrop = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragging(false);
    if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      if (fileType.includes(e.dataTransfer.files[0].type)) {
        handleFileDrop(e.dataTransfer.files[0]);
        e.dataTransfer.clearData();
      } else {
        setSupportedFileTypeError(true);
      }
    }
  };

  useEffect(() => {
    const div = dropRef.current;
    dragCounter = 0;
    if (div) {
      div.addEventListener('dragenter', handleDragIn);
      div.addEventListener('dragleave', handleDragOut);
      div.addEventListener('dragover', handleDrag);
      div.addEventListener('drop', handleDrop, false);
    }

    return () => {
      if (div) {
        div.removeEventListener('dragenter', handleDragIn);
        div.removeEventListener('dragleave', handleDragOut);
        div.removeEventListener('dragover', handleDrag);
        div.removeEventListener('drop', handleDrop);
      }
    };
  }, []);

  return (
    <div className="drag-and-drop-div-main" ref={dropRef}>
      {dragging && (
        <FlexLayout
          className="drag-and-drop-true"
          flexDirection={EFlexDirection.COLUMN}
          justifyContent={EFlexJustifyContent.SPACE_EVENLY}
        >
          <Icon
            title={EIconTitle.DOWNLOAD}
            width="26px"
            height="26px"
            stroke="#1e88e5" /* stroke: $brand-blue-2 */
          />
          {t('common.dropFileText')}
        </FlexLayout>
      )}
      {supportedFileTypeError && (
        <div className="drag-and-drop-error">Supported file types - {fileType.join()}</div>
      )}
      {content}
    </div>
  );
};

我尝试为其编写一些单元测试-

describe('Drag and drop test', () => {
  const handleFileDropFunction = jest.fn();
  const handleDrag = jest.fn();
  const fileTypeParameter = ['text/xml'];

  it('should call handleDrag function when dragging starts', async done => {
    const wrapper = renderWithProviders(
      <DragAndDropFile handleFileDrop={handleFileDropFunction} fileType={fileTypeParameter} />
    );
    const mouseDrag = new Event('dragover');
    const mouseDragIn = new Event('dragenter');
    const mouseDragleave = new Event('dragover');
    const top = window.document.documentElement;
    top.dispatchEvent(mouseDrag);
    top.dispatchEvent(mouseDragIn);
    top.dispatchEvent(mouseDragleave);
    console.log(wrapper.find('.drag-and-drop-div-main').props());
    expect(handleDrag).toHaveBeenCalled();
  });
});

但是永远不会调用处理函数。我在做什么错？我应该如何处理？在这方面的任何帮助将不胜感激

使用Jest酶测试React JS中的拖放文件

0 个答案: