title: Tests using react-dnd with useDrag and useDrop
body: <p>Has anyone ever been able to test the drag-and-drop functionality from <a href="https://github.com/react-dnd/react-dnd" rel="noreferrer">https://github.com/react-dnd/react-dnd</a> using a functional component with useDrag and useDrop hooks?</p>
  
  <p>According to the examples found here <a href="http://react-dnd.github.io/react-dnd/docs/testing" rel="noreferrer">http://react-dnd.github.io/react-dnd/docs/testing</a>, they either decorate the original component with a DragSource or a DropTarget HOC.
  For Example:</p>
  
  <pre><code>// ...
  
  export interface BoxProps {
      name: string
  
      // Collected Props
      isDragging: boolean
      connectDragSource: ConnectDragSource
  }
  const Box: React.FC&lt;BoxProps&gt; = ({ name, isDragging, connectDragSource }) =&gt; {
      const opacity = isDragging ? 0.4 : 1
      return (
          &lt;div ref={connectDragSource} style={{ ...style, opacity }}&gt;
              {name}
          &lt;/div&gt;
      )
  }
  
  export default DragSource(
      ItemTypes.BOX,
      {
          beginDrag: (props: BoxProps) =&gt; ({ name: props.name }),
          endDrag(props: BoxProps, monitor: DragSourceMonitor) {
              const item = monitor.getItem()
              const dropResult = monitor.getDropResult()
  
              if (dropResult) {
                  alert(`You dropped ${item.name} into ${dropResult.name}!`)
              }
          },
      },
      (connect: DragSourceConnector, monitor: DragSourceMonitor) =&gt; ({
          connectDragSource: connect.dragSource(),
          isDragging: monitor.isDragging(),
      }),
  )(Box)
  </code></pre>
  
  <p>Example taken from <a href="https://github.com/react-dnd/react-dnd/blob/master/packages/documentation/examples-decorators/src/01-dustbin/single-target/Box.tsx" rel="noreferrer">https://github.com/react-dnd/react-dnd/blob/master/packages/documentation/examples-decorators/src/01-dustbin/single-target/Box.tsx</a></p>
  
  <p>I couldn't find any example of tests using their hooks though. They do have examples of code using both decorators and hooks (<a href="https://github.com/react-dnd/react-dnd/tree/master/packages/documentation" rel="noreferrer">https://github.com/react-dnd/react-dnd/tree/master/packages/documentation</a>) but there are examples of tests only using the decorators.</p>