title: How to test drag and drop with React Dnd
body: <p>I created a drag and drop interaction in React using <code>react-dnd</code> library and I want to <strong>test</strong> that on drop, a certain function is called. </p>
  
  <p>However, I'm blocked on how to setup the test in order to make it pass.</p>
  
  <p>My code until now is:</p>
  
  <pre><code>it('should ', () =&gt; {
        const dropTarget = mountWithTheme(
          withRedux(store, &lt;DnDCard fileId={folder._id} onClick={onClick} /&gt;),
        )
  
        const dragSource = mountWithTheme(
          withRedux(store, &lt;DnDCard fileId={img._id} onClick={onClick} /&gt;)
        )
  
        var backend = getBackendFromInstance(&lt;DnDCard fileId={folder._id} onClick={onClick} /&gt; )
        var manager = backend.manager
  
        simulateDragDropSequence(dropTarget.instance(), dragSource.instance(), backend)
      })
  </code></pre>
  
  <p>And in that <code>simulateDragDropSequence</code> I get an error saying that:</p>
  
  <blockquote>
    <p><code>Cannot read property 'getHandlerId' of null</code>.</p>
  </blockquote>
  
  <p>That's because the <code>function</code> tries to call <code>getHandlerId</code> on the first 2 parameters of it, but apparently the instance doesn't provide that.</p>
  
  <p>That <code>mountWithTheme</code> is adding <code>Redux</code> with a <code>Provider</code> for our component so it works fine.</p>
  
  <p>What would be the issue here?</p>
  
  <p>LE: Read <a href="https://react-dnd.github.io/react-dnd/docs/api/drop-target" rel="nofollow noreferrer">here</a> that <code>getHandlerId</code> is an instance method available when setting up the component with Legacy Decorator API but I did it using Hooks ( Top-Level API ). I think this might be the reason this is not quite testable.</p>