How to use react-dnd-test-utils - 10 common examples

it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return (
				<div>
					
					
				</div>
			)
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root: any = TestUtils.renderIntoDocument()

		// Obtain a reference to the backend
		const backend = root.getManager().getBackend()

		// Find the drag source ID and use it to simulate the dragging operation
		const box: any = TestUtils.findRenderedComponentWithType(root, Box)
		backend.simulateBeginDrag([box.getHandlerId()])

		window.alert = jest.fn()

		const dustbin: any = TestUtils.findRenderedComponentWithType(root, Dustbin)
		backend.simulateHover([dustbin.getHandlerId()])
		backend.simulateDrop()

it('behaves as expected', () => {
		const Wrapped = wrapInTestContext(Example)
		const root = mount()
		const backend = getInstance()!

		// Verify that all of the key components mounted
		const dustbins = root.find(DndDustbin)
		const boxes = root.find(DndBox)
		expect(dustbins.length).toEqual(4)
		expect(boxes.length).toEqual(3)

		window.alert = jest.fn()

		// Bin Types
		const glassBin: DndC = dustbins.at(0).instance() as any
		const foodBin: DndC = dustbins.at(1).instance() as any
		// const paperGlassUrlBin: DndC = dustbins
		// 	.at(2)

it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return 
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root = mount()

		// Obtain a reference to the backend
		const backend = getBackendFromInstance(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent = root
			.find(Dustbin)
			.instance() as any

it('can be tested with the testing backend', () => {
		// Render with the testing backend
		const BoxContext = wrapInTestContext(Box)
		const root = mount()

		// Obtain a reference to the backend
		const element = root.instance() as ContextComponent
		const backend = (element.getManager().getBackend() as any) as TestBackend
		expect(backend).toBeDefined()

		// Check that the opacity is 1
		let div = root.getDOMNode() as HTMLDivElement
		expect(div.style.opacity).toEqual('1')

		// Find the drag source ID and use it to simulate the dragging state
		const box: any = root.find(Box).instance()
		backend.simulateBeginDrag([box.getHandlerId()])

		// Verify that the div changed its opacity

it('can be tested with the testing backend', () => {
    // Render with the testing backend
    const BoxContext = wrapInTestContext(Box)
    const root = mount()

    // Obtain a reference to the backend
    const element = root.instance() as ContextComponent
    const backend = (element.getManager().getBackend() as any) as TestBackend
    expect(backend).toBeDefined()

    // Check that the opacity is 1
    let div = root.getDOMNode() as HTMLDivElement
    expect(div.style.opacity).toEqual('1')

    // Find the drag source ID and use it to simulate the dragging state
    const box: any = root.find(Box).instance()
    backend.simulateBeginDrag([box.getHandlerId()])

    // Verify that the div changed its opacity

it('can simulate a full drag and drop interaction', () => {
		function TestCase() {
			return 
		}
		const WrappedTestCase = wrapInTestContext(TestCase)

		// Render with the test context that uses the test backend
		const root = mount()

		// Obtain a reference to the backend
		const backend = getBackendFromInstance(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent = root
			.find(Dustbin)
			.instance() as any

		window.alert = jest.fn()
		simulateDragDropSequence(box, dustbin, backend)
		expect(window.alert).toHaveBeenCalledWith(
			`You dropped ${box.props.name} into Dustbin!`,
		)
	})

let connectArgs: any[] = []

		const Target = DropTarget(
			'BOX',
			{
				drop: () => ({ name: 'Target' }),
			},
			(connect, monitor, props) => {
				connectorFired = true
				connectArgs = [connect, monitor, props]
				return { drop: connect.dropTarget() }
			},
		)((props: any) =&gt; props.drop(<div>test target</div>))

		// Render with the test context that uses the test backend
		const WrappedTarget = wrapInTestContext(Target)
		TestUtils.renderIntoDocument()

		expect(connectorFired).toBeTruthy()
		expect(connectArgs.length).toEqual(3)
		connectArgs.forEach(c =&gt; expect(c).toBeDefined())
		expect(connectArgs[2].x).toEqual(1)
		expect(connectArgs[2].y).toEqual(2)
	})
})

let connectArgs: any[] = []

		const Target = DropTarget(
			'BOX',
			{
				drop: () => ({ name: 'Target' }),
			},
			(connect, monitor, props) => {
				connectorFired = true
				connectArgs = [connect, monitor, props]
				return { drop: connect.dropTarget() }
			},
		)((props: any) =&gt; props.drop(<div>test target</div>))

		// Render with the test context that uses the test backend
		const WrappedTarget = wrapInTestContext(Target)
		mount()

		expect(connectorFired).toBeTruthy()
		expect(connectArgs.length).toEqual(3)
		connectArgs.forEach(c =&gt; expect(c).toBeDefined())
		expect(connectArgs[2].x).toEqual(1)
		expect(connectArgs[2].y).toEqual(2)
	})
})

const root = mount()

		// Obtain a reference to the backend
		const backend = getBackendFromInstance(root.instance() as any)

		// Find the drag source ID and use it to simulate the dragging operation
		const box: DndComponent = root
			.find(Box)
			.at(0)
			.instance() as any
		const dustbin: DndComponent = root
			.find(Dustbin)
			.instance() as any

		window.alert = jest.fn()
		simulateDragDropSequence(box, dustbin, backend)
		expect(window.alert).toHaveBeenCalledWith(
			`You dropped ${box.props.name} into Dustbin!`,
		)
	})
})

// interactions

		// drop bottle into glass bin
		simulateDragDropSequence(bottleBox, glassBin, backend)
		expect(glassBin.props.lastDroppedItem.name).toEqual(bottleBox.props.name)

		// food won't drop into the glass bin
		simulateDragDropSequence(bananaBox, glassBin, backend)
		expect(glassBin.props.lastDroppedItem.name).toEqual(bottleBox.props.name)

		// glass won't drop into the food box...
		simulateDragDropSequence(bottleBox, foodBin, backend)
		expect(foodBin.props.lastDroppedItem).toBeNull()

		// but some food will work
		simulateDragDropSequence(bananaBox, foodBin, backend)
		expect(foodBin.props.lastDroppedItem.name).toEqual(bananaBox.props.name)
	})
})