{"library":"react-beautiful-dnd-test-utils","title":"React Beautiful DnD Test Utils","description":"react-beautiful-dnd-test-utils is a testing utility library designed to facilitate unit and integration testing of components that integrate with `react-beautiful-dnd` (rbd). It leverages `@testing-library/react` for DOM interaction and assertions, making it suitable for testing rbd applications in a JSDOM environment like Jest. The current stable version is 4.1.1, released in late 2021. While not frequently updated, its purpose as a testing helper for a stable library means updates are typically driven by major changes in rbd or testing-library. Its primary differentiator is its specific focus on simplifying drag-and-drop interactions within tests for rbd components, abstracting away complex simulated events.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-beautiful-dnd-test-utils"],"cli":null},"imports":["import { makeDnd } from 'react-beautiful-dnd-test-utils'","import { mockDndSpacing } from 'react-beautiful-dnd-test-utils'","import { mockGetComputedStyle } from 'react-beautiful-dnd-test-utils'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';\nimport { makeDnd, mockDndSpacing } from 'react-beautiful-dnd-test-utils';\n\n// A simple component using react-beautiful-dnd\nfunction DraggableList({ items, onDragEnd }) {\n  return (\n    <DragDropContext onDragEnd={onDragEnd}>\n      <Droppable droppableId=\"list\">\n        {(provided) => (\n          <div {...provided.droppableProps} ref={provided.innerRef} data-testid=\"droppable-list\">\n            {items.map((item, index) => (\n              <Draggable key={item.id} draggableId={item.id} index={index}>\n                {(provided) => (\n                  <div\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    {...provided.dragHandleProps}\n                    data-testid={`draggable-item-${item.id}`}\n                  >\n                    {item.content}\n                  </div>\n                )}\n              </Draggable>\n            ))}\n            {provided.placeholder}\n          </div>\n        )}\n      </Droppable>\n    </DragDropContext>\n  );\n}\n\ndescribe('DraggableList', () => {\n  const initialItems = [\n    { id: 'item-1', content: 'Item 1' },\n    { id: 'item-2', content: 'Item 2' },\n    { id: 'item-3', content: 'Item 3' },\n  ];\n\n  let itemsInState = [...initialItems];\n\n  const handleDragEnd = (result) => {\n    if (!result.destination) return;\n    const [removed] = itemsInState.splice(result.source.index, 1);\n    itemsInState.splice(result.destination.index, 0, removed);\n  };\n\n  beforeEach(() => {\n    // Reset items for each test\n    itemsInState = [...initialItems];\n    // Mock getComputedStyle for rbd in JSDOM\n    mockDndSpacing(document.body);\n  });\n\n  it('should be able to drag \"Item 1\" down by one position', async () => {\n    render(<DraggableList items={itemsInState} onDragEnd={handleDragEnd} />);\n\n    const dnd = makeDnd({\n      getDragElement: () => screen.getByText('Item 1'),\n    });\n\n    // Simulate dragging 'Item 1' down by one position\n    await dnd.dragBy(1);\n\n    // Verify the order has changed in the mocked state and rendered DOM\n    expect(itemsInState[0].content).toBe('Item 2');\n    expect(itemsInState[1].content).toBe('Item 1');\n    expect(itemsInState[2].content).toBe('Item 3');\n\n    // Re-render to show updated state (if you were testing the UI after state change)\n    // Or assert directly on the `itemsInState` for stateful components.\n  });\n});","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}