How to use the react-dnd-test-utils.wrapInTestContext function in react-dnd-test-utils

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

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 createComponent = () => {
    const Wrapped = wrapInTestContext(Preview);
    return mount( { return null; }} />);
  };