react-dnd + proxyquire -> Invariant Violation: Could not find the drag and drop manager in the context MyComponent

1.5k Views Asked by At

I've been using proxyquire to stub out sub-components and stores but ran into an Invariant Violation with components that are wrapped in react-dnd contexts.

Warning: Failed Context Types: Required context dragDropManager was not specified in DragSource(Card). Error: Invariant Violation: Could not find the drag and drop manager in the context of Card. Make sure to wrap the top-level component of your app with DragDropContext. Read more: http://gaearon.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context

I put together a repo to demonstrate the error: see https://github.com/cmelion/react-hot-boilerplate/tree/Invariant-Violation-DND

To run it execute

npm install 
npm test
1

There are 1 best solutions below

0
Charles Fulnecky On

While I don't fully understand why, setting "stub['@global'] = true" on the stub returned by proxyquire triggered the invariant violation.

Not setting @global prevents React.TestUtils from working correctly, again not sure why.

The final solution was a combination of using a boolean to conditionally set @global and falling back to good-old querySelectorAll.

const subComponent = React.findDOMNode(comp).querySelectorAll('.simple-subcomponent');
should(subComponent.length).equal(1);

The repo has been updated with test cases that illustrate the difference between the "normal" proxyquire stub and the "special" case.