Cannot test a component that is both a drag source and a drop target

[emilecantin]

I have a component in my app that is both a drag source and a drop target, exactly like in this example: https://github.com/gaearon/react-dnd/blob/master/examples/04%20Sortable/Simple/Card.js#L92

When I use the test backend to start a drag operation, I get the following error:

Invariant Violation: Expected a valid source ID.

Looking at the source, it looks like it's coming from parseRoleFromHandlerId, which expects the ID to start with either S for a drag source, or T for a drop target. My component is both, and its ID is "T12", so it's not recognized as a drag source by the test backend.

From the examples, I gathered that this use-case is a supported one, but it would be nice to be able to test it.

[emilecantin]

OK, I found how to do this. I'll document it here in hopes that it helps future devs Googling the error message.

The solution is to export the intermediate item, like so:

class MyComponent extends React.Component {
  // ...
}

export const MyComponentDragSource = DragSource(/* ... */)(MyComponent);
// ^^^ export the intermediate component

export default const MyComponentDropTarget = DropTarget(/* ... */)(MyComponentDragSource);

Then you can use it in your test like so:

import MyComponent, {MyComponentDragSource} from '../MyComponent';

// ...
      // Inside test
      const root = TestUtils.renderIntoDocument(<MyComponent />);
      const backend = root.getManager().getBackend();

      const item = TestUtils.findRenderedComponentWithType(root, MyComponentDragSource);
      // Notice we find the DragSource, not the regular component:          ^^^^^^^^^^
      backend.simulateBeginDrag([item.getHandlerId()]); // Will work now
// ...

[jameynakama]

My god, thank you