puppeteer/puppeteer#1265 workaround

app.feature.js

describe('App', () => {
  test('Drag&Drop capability', async () => {
    await page.waitForSelector('.js-from')

    await page.evaluate(() => {
      window.simulateDrag()
      window.simulateDrop()
    })

    expect(await page.evaluate(el => el.innerText, await page.$('.js-to')))
      .toEqual('To: payload')
  })
})

app.jsx

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-dom/test-utils'

import { DragDropContext, DragSource, DropTarget } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

const dragSource = {
  beginDrag (props) {
    return { payload: props.payload }
  }
}

const dropTarget = {
  drop (props, monitor) {
    props.onDrop(monitor.getItem().payload)
  }
}

function dragCollect (connect) {
  return { connectDragSource: connect.dragSource() }
}

function dropCollect (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

class From extends Component {
  render () {
    const { connectDragSource, payload } = this.props
    return connectDragSource(
      <div className="js-from">
        From: {payload}
      </div>)
  }
}

class To extends Component {
  render () {
    const { connectDropTarget, payload } = this.props
    return connectDropTarget(
      <div className="js-to">
        To: {payload}
      </div>)
  }
}

const Source = DragSource('domain', dragSource, dragCollect)(From)
const Target = DropTarget('domain', dropTarget, dropCollect)(To)

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {payload: ''}
    this.onDrop = this.onDrop.bind(this)
  }
  onDrop (payload) {
    this.setState({ payload })
  }
  render () {
    return (
      <div>
        <Source payload="payload" />
        <Target onDrop={this.onDrop} payload={this.state.payload}/>
      </div>
    )
  }
}

const Context = DragDropContext(HTML5Backend)(App)
window.root = ReactDOM.render(<Context />, document.getElementById('root'))

window.simulateDrag = function simulateDrag (index = 0) {
  const context = TestUtils.findRenderedComponentWithType(this.root, Context)
  const backend = context.getManager().getBackend()
  const sources = TestUtils.scryRenderedComponentsWithType(context, Source)
  backend.actions.beginDrag([sources[index].getHandlerId()])
}

window.simulateDrop = function simulateDrop (index = 0) {
  const context = TestUtils.findRenderedComponentWithType(this.root, Context)
  const backend = context.getManager().getBackend()
  const targets = TestUtils.scryRenderedComponentsWithType(context, Target)
  backend.actions.hover([targets[index].getHandlerId()])
  backend.actions.drop()
  backend.actions.endDrag()
}