New to React DnD? Read the overview before jumping into the docs.


React DnD is test-friendly. The whole drag and drop interaction, including the rendering of your components, as well as the side effects you perform in response to the drag and drop events, can be tested.

There are several different approaches to testing React components. React DnD is not opinionated and lets you use either of them. Neither of those approaches require the browser event system to be available.

A few test examples are included with the React DnD inside its examples folder. Run npm install and npm test inside the react-dnd root folder to start them.

Testing the Components in Isolation 

If you are only interested in testing the rendering of your components in isolation, and not their interaction, you may use the DecoratedComponent static property available on any class wrapped with React DnD to access the original class. You may then test it with the different props without any dependency on React DnD, supplying an identity function to stub the connector methods.

var React = require('react'); var TestUtils = require('react-addons-test-utils'); var expect = require('expect'); it('can be tested independently', function () { // Obtain the reference to the component before React DnD wrapping var OriginalBox = Box.DecoratedComponent; // Stub the React DnD connector functions with an identity function var identity = function (el) { return el; }; // Render with one set of props and test var root = TestUtils.renderIntoDocument( <OriginalBox name='test' connectDragSource={identity} /> ); var div = TestUtils.findRenderedDOMComponentWithTag(root, 'div'); expect(; // Render with another set of props and test root = TestUtils.renderIntoDocument( <OriginalBox name='test' connectDragSource={identity} isDragging /> ); div = TestUtils.findRenderedDOMComponentWithTag(root, 'div'); expect(; });

Testing the Drag and Drop Interaction 

If you want to test the whole interaction, and not just the individual component rendering, you should use the test backend. The test backend does not require the DOM so you can also use it with ReactShallowRenderer just fine.

This is currently the least documented part of React DnD because it exposes the underlying concepts from the DnD Core, the library powering React DnD inside. You can learn more about the test backend and its methods from the DnD Core tests.

First, you need to install the test backend:

npm install --save-dev react-dnd-test-backend

Here is an example to get you started:

var React = require('react'); var Component = React.Component; var TestBackend = require('react-dnd-test-backend'); var DragDropContext = require('react-dnd').DragDropContext; var TestUtils = require('react-addons-test-utils'); var expect = require('expect'); /** * Wraps a component into a DragDropContext that uses the TestBackend. */ function wrapInTestContext(DecoratedComponent) { return DragDropContext(TestBackend)( React.createClass({ render: function () { return <DecoratedComponent {...this.props} />; } }) ); } it('can be tested with the testing backend', function () { // Render with the test context that uses the test backend var BoxContext = wrapInTestContext(Box); var root = TestUtils.renderIntoDocument(<BoxContext name='test' />); // Obtain a reference to the backend var backend = root.getManager().getBackend(); // Test that the opacity is 1 let div = TestUtils.findRenderedDOMComponentWithTag(root, 'div'); expect(; // Find the drag source ID and use it to simulate the dragging operation var box = TestUtils.findRenderedComponentWithType(root, Box); backend.simulateBeginDrag([box.getHandlerId()]); // Optionally you can pass in a clientOffset for testing operations that // depend on mouse movements. // backend.simulateBeginDrag([box.getHandlerId()], { // clientOffset: { x: 0, y: 0 }, // getSourceClientOffset: () => ({ x: 0, y: 0 }), // }); // Verify that the div changed its opacity div = TestUtils.findRenderedDOMComponentWithTag(root, 'div'); expect(; // See other backend.simulate* methods for more! });