Registry /
testing / react-beautiful-dnd-test-utils
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
makeDnd
✓ import { makeDnd } from 'react-beautiful-dnd-test-utils'
✗ import makeDnd from 'react-beautiful-dnd-test-utils'
This is a named export. It creates a function to simulate drag and drop events for an element found by text or custom getter.
mockDndSpacing
✓ import { mockDndSpacing } from 'react-beautiful-dnd-test-utils'
✗ const { mockDndSpacing } = require('react-beautiful-dnd-test-utils')
Used to mock CSS properties like `getComputedStyle` which `react-beautiful-dnd` relies on. Essential for JSDOM environments. Renamed from `mockDndElSpacing` in v4.0.0.
mockGetComputedStyle
✓ import { mockGetComputedStyle } from 'react-beautiful-dnd-test-utils'
✗ import { mockGetComputedSpacing } from 'react-beautiful-dnd-test-utils'
Renamed from `mockGetComputedSpacing` in v4.0.0. Provides a more generic mock for `window.getComputedStyle` if `mockDndSpacing` is insufficient.
This quickstart demonstrates how to set up a basic test for a `react-beautiful-dnd` component using `makeDnd` and `mockDndSpacing`. It shows how to render a list of draggable items, mock necessary DOM properties for `rbd` to function correctly in JSDOM, and then simulate a drag-and-drop event to verify item reordering and state updates.
import React from 'react';
import { render, screen } from '@testing-library/react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { makeDnd, mockDndSpacing } from 'react-beautiful-dnd-test-utils';
// A simple component using react-beautiful-dnd
function DraggableList({ items, onDragEnd }) {
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="list">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef} data-testid="droppable-list">
{items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
data-testid={`draggable-item-${item.id}`}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}
describe('DraggableList', () => {
const initialItems = [
{ id: 'item-1', content: 'Item 1' },
{ id: 'item-2', content: 'Item 2' },
{ id: 'item-3', content: 'Item 3' },
];
let itemsInState = [...initialItems];
const handleDragEnd = (result) => {
if (!result.destination) return;
const [removed] = itemsInState.splice(result.source.index, 1);
itemsInState.splice(result.destination.index, 0, removed);
};
beforeEach(() => {
// Reset items for each test
itemsInState = [...initialItems];
// Mock getComputedStyle for rbd in JSDOM
mockDndSpacing(document.body);
});
it('should be able to drag "Item 1" down by one position', async () => {
render(<DraggableList items={itemsInState} onDragEnd={handleDragEnd} />);
const dnd = makeDnd({
getDragElement: () => screen.getByText('Item 1'),
});
// Simulate dragging 'Item 1' down by one position
await dnd.dragBy(1);
// Verify the order has changed in the mocked state and rendered DOM
expect(itemsInState[0].content).toBe('Item 2');
expect(itemsInState[1].content).toBe('Item 1');
expect(itemsInState[2].content).toBe('Item 3');
// Re-render to show updated state (if you were testing the UI after state change)
// Or assert directly on the `itemsInState` for stateful components.
});
});
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'getComputedStyle')
`react-beautiful-dnd` relies on `window.getComputedStyle` which is not available in a JSDOM environment by default.
fixCall `mockDndSpacing(document.body)` or `mockGetComputedStyle()` in your `beforeEach` hook to mock the necessary DOM APIs for `react-beautiful-dnd`.
Error: Could not find drag handle with text: 'My Draggable Item'
The `makeDnd({ text: '...' })` function failed to locate an element with the specified text content to initiate the drag.
fixEnsure the text provided to `makeDnd` exactly matches the visible text content of the draggable element, or use the `getDragElement` option to provide a custom selector function.
Property 'dragHandleProps' does not exist on type 'DraggableProvided'.
This is a TypeScript error when `dragHandleProps` is not correctly spread onto the element that should serve as the drag handle for the draggable item, or incorrect types are inferred.
fixEnsure that `provided.dragHandleProps` is correctly spread onto the intended drag handle element within your `<Draggable>` component, e.g., `<div {...provided.dragHandleProps}>...</div>`. Verify `react-beautiful-dnd` and `@types/react-beautiful-dnd` versions match. Audit
Dependencies
@testing-library/jest-domrequiredRequired for Jest DOM matchers and extending assertions.
@testing-library/reactrequiredCore library for rendering React components and interacting with the DOM in tests.
@testing-library/user-eventrequiredSimulates user interactions more closely than fireEvent, including drag and drop actions.
jestrequiredPrimary test runner for which this library's utilities are designed.