react-dropzone 5.0.0 → 5.1.1

package/src/index.spec.js

@@ -1,9 +1,18 @@
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+
 import React from 'react'
 import { mount, render } from 'enzyme'
-import { spy, stub } from 'sinon'
 import { onDocumentDragOver } from './utils'
 
-const Dropzone = require(process.env.JEST_TARGET ? process.env.JEST_TARGET : './index') // eslint-disable-line import/no-dynamic-require
+const flushPromises = wrapper =>
+  new Promise(resolve =>
+    global.setImmediate(() => {
+      wrapper.update()
+      resolve(wrapper)
+    })
+  )
+const Dropzone = require('./index')
 const DummyChildComponent = () => null
 
 let files
@@ -85,14 +94,15 @@ describe('Dropzone', () => {
 
     it('applies the accept prop to the child input', () => {
       const component = render(<Dropzone className="my-dropzone" accept="image/jpeg" />)
-      expect(component.find('.my-dropzone').attr()).not.toContain('accept')
+
+      expect(component.attr()).not.toContain('accept')
       expect(Object.keys(component.find('input').attr())).toContain('accept')
       expect(component.find('input').attr('accept')).toEqual('image/jpeg')
     })
 
     it('applies the name prop to the child input', () => {
       const component = render(<Dropzone className="my-dropzone" name="test-file-input" />)
-      expect(component.find('.my-dropzone').attr()).not.toContain('name')
+      expect(component.attr()).not.toContain('name')
       expect(Object.keys(component.find('input').attr())).toContain('name')
       expect(component.find('input').attr('name')).toEqual('test-file-input')
     })
@@ -106,40 +116,30 @@ describe('Dropzone', () => {
   })
 
   describe('document drop protection', () => {
-    let dropzone
-    let addEventCalls
-    let savedAddEventListener
-    let savedRemoveEventListener
-
-    beforeEach(() => {
-      savedAddEventListener = document.addEventListener
-      savedRemoveEventListener = document.removeEventListener
-      document.addEventListener = spy()
-      document.removeEventListener = spy()
-    })
-
-    afterEach(() => {
-      document.addEventListener = savedAddEventListener
-      document.removeEventListener = savedRemoveEventListener
-    })
+    const event = { preventDefault: jest.fn() }
+    const onAddEventListener = jest.spyOn(document, 'addEventListener')
+    const onRemoveEventListener = jest.spyOn(document, 'removeEventListener')
 
     // Collect the list of addEventListener/removeEventListener spy calls into an object keyed by event name.
     function collectEventListenerCalls(calls) {
-      return calls.reduce((acc, [eventName, ...rest]) => {
-        acc[eventName] = rest // eslint-disable-line no-param-reassign
-        return acc
-      }, {})
+      return calls.reduce(
+        (acc, [eventName, ...rest]) => ({
+          ...acc,
+          [eventName]: rest
+        }),
+        {}
+      )
     }
 
     it('installs hooks to prevent stray drops from taking over the browser window', () => {
-      dropzone = mount(
+      const dropzone = mount(
         <Dropzone>
           <p>Content</p>
         </Dropzone>
       )
       expect(dropzone.html()).toMatchSnapshot()
-      expect(document.addEventListener.callCount).toEqual(2)
-      addEventCalls = collectEventListenerCalls(document.addEventListener.args)
+      expect(onAddEventListener).toHaveBeenCalledTimes(2)
+      const addEventCalls = collectEventListenerCalls(onAddEventListener.mock.calls)
       Object.keys(addEventCalls).forEach(eventName => {
         expect(addEventCalls[eventName][0]).toBeDefined()
         expect(addEventCalls[eventName][1]).toBe(false)
@@ -147,71 +147,82 @@ describe('Dropzone', () => {
     })
 
     it('terminates drags and drops on elements outside our dropzone', () => {
-      const event = { preventDefault: spy() }
+      const dropzone = mount(
+        <Dropzone>
+          <p>Content</p>
+        </Dropzone>
+      )
+
       onDocumentDragOver(event)
-      expect(event.preventDefault.callCount).toEqual(1)
-      event.preventDefault.reset()
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
+      event.preventDefault.mockClear()
 
-      dropzone.getNode().onDocumentDrop(event)
-      expect(event.preventDefault.callCount).toEqual(1)
+      dropzone.instance().onDocumentDrop(event)
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
     })
 
     it('permits drags and drops on elements inside our dropzone', () => {
+      const dropzone = mount(
+        <Dropzone>
+          <p>Content</p>
+        </Dropzone>
+      )
+
       const instanceEvent = {
-        preventDefault: spy(),
+        preventDefault: jest.fn(),
         target: dropzone.getDOMNode()
       }
-      dropzone.getNode().onDocumentDrop(instanceEvent)
-      expect(instanceEvent.preventDefault.callCount).toEqual(0)
+      dropzone.instance().onDocumentDrop(instanceEvent)
+      expect(instanceEvent.preventDefault).not.toHaveBeenCalled()
     })
 
     it('removes document hooks when unmounted', () => {
+      const dropzone = mount(
+        <Dropzone>
+          <p>Content</p>
+        </Dropzone>
+      )
       dropzone.unmount()
-      expect(document.removeEventListener.callCount).toEqual(2)
-      const removeEventCalls = collectEventListenerCalls(document.removeEventListener.args)
+      expect(onRemoveEventListener).toHaveBeenCalledTimes(2)
+      const addEventCalls = collectEventListenerCalls(onAddEventListener.mock.calls)
+      const removeEventCalls = collectEventListenerCalls(onRemoveEventListener.mock.calls)
       Object.keys(addEventCalls).forEach(eventName => {
         expect(removeEventCalls[eventName][0]).toEqual(addEventCalls[eventName][0])
       })
     })
 
     it('does not prevent stray drops when preventDropOnDocument is false', () => {
-      dropzone = mount(<Dropzone preventDropOnDocument={false} />)
+      const dropzone = mount(<Dropzone preventDropOnDocument={false} />)
       expect(dropzone.html()).toMatchSnapshot()
-      expect(document.addEventListener.callCount).toEqual(0)
+      expect(onAddEventListener).not.toHaveBeenCalled()
 
       dropzone.unmount()
-      expect(document.removeEventListener.callCount).toEqual(0)
+      expect(onRemoveEventListener).not.toHaveBeenCalled()
     })
   })
 
   describe('onClick', () => {
-    it('should call `open` method', done => {
+    it('should call `open` method', () => {
       const dropzone = mount(<Dropzone />)
-      spy(dropzone.instance(), 'open')
+      const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('click')
-      setTimeout(() => {
-        expect(dropzone.instance().open.callCount).toEqual(1)
-        done()
-      }, 0)
+      expect(open).toHaveBeenCalled()
     })
 
     it('should not call `open` if disableClick prop is true', () => {
       const dropzone = mount(<Dropzone disableClick />)
-      spy(dropzone.instance(), 'open')
+      const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('click')
-      expect(dropzone.instance().open.callCount).toEqual(0)
+      expect(open).not.toHaveBeenCalled()
     })
 
-    it('should call `onClick` callback if provided', done => {
-      const clickSpy = spy()
-      const dropzone = mount(<Dropzone onClick={clickSpy} />)
-      spy(dropzone.instance(), 'open')
+    it('should call `onClick` callback if provided', () => {
+      const onClick = jest.fn()
+      const dropzone = mount(<Dropzone onClick={onClick} />)
+      const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('click')
-      setTimeout(() => {
-        expect(dropzone.instance().open.callCount).toEqual(1)
-        expect(clickSpy.callCount).toEqual(1)
-        done()
-      }, 0)
+      expect(open).toHaveBeenCalled()
+      expect(onClick).toHaveBeenCalled()
     })
 
     it('should reset the value of input', () => {
@@ -237,97 +248,82 @@ describe('Dropzone', () => {
       ).toBeUndefined()
     })
 
-    it('should trigger click even on the input', done => {
+    it('should trigger click even on the input', () => {
       const dropzone = mount(<Dropzone />)
-      const clickSpy = spy(dropzone.instance().fileInputEl, 'click')
+      const onFileInputClick = jest.spyOn(dropzone.instance().fileInputEl, 'click')
       dropzone.simulate('click')
       dropzone.simulate('click')
-      setTimeout(() => {
-        expect(clickSpy.callCount).toEqual(2)
-        done()
-      }, 0)
+      expect(onFileInputClick).toHaveBeenCalledTimes(2)
     })
 
     it('should not invoke onClick on the wrapper', () => {
-      const onClickOuterSpy = spy()
-      const onClickInnerSpy = spy()
+      const onClickOuter = jest.fn()
+      const onClickInner = jest.fn()
       const component = mount(
-        <div onClick={onClickOuterSpy}>
-          <Dropzone onClick={onClickInnerSpy} />
+        <div onClick={onClickOuter}>
+          <Dropzone onClick={onClickInner} />
         </div>
       )
 
       component.simulate('click')
-      expect(onClickOuterSpy.callCount).toEqual(1)
-      expect(onClickInnerSpy.callCount).toEqual(0)
+      expect(onClickOuter).toHaveBeenCalled()
+      expect(onClickInner).not.toHaveBeenCalled()
 
-      onClickOuterSpy.reset()
-      onClickInnerSpy.reset()
+      onClickOuter.mockClear()
+      onClickInner.mockClear()
 
       component.find(Dropzone).simulate('click')
-      expect(onClickOuterSpy.callCount).toEqual(0)
-      expect(onClickInnerSpy.callCount).toEqual(1)
+      expect(onClickOuter).not.toHaveBeenCalled()
+      expect(onClickInner).toHaveBeenCalled()
     })
 
     it('should invoke onClick on the wrapper if disableClick is set', () => {
-      const onClickOuterSpy = spy()
+      const onClick = jest.fn()
       const component = mount(
-        <div onClick={onClickOuterSpy}>
+        <div onClick={onClick}>
           <Dropzone disableClick />
         </div>
       )
 
       component.find(Dropzone).simulate('click')
-      expect(onClickOuterSpy.callCount).toEqual(1)
+      expect(onClick).toHaveBeenCalled()
     })
 
-    it('should invoke inputProps onClick if provided', done => {
-      const inputPropsClickSpy = spy()
-      const component = mount(<Dropzone inputProps={{ onClick: inputPropsClickSpy }} />)
+    it('should invoke inputProps onClick if provided', () => {
+      const onClick = jest.fn()
+      const component = mount(<Dropzone inputProps={{ onClick }} />)
 
       component.simulate('click')
-      setTimeout(() => {
-        expect(inputPropsClickSpy.callCount).toEqual(1)
-        done()
-      }, 0)
+      expect(onClick).toHaveBeenCalled()
     })
   })
 
   describe('drag-n-drop', () => {
     it('should override onDrag* methods', () => {
-      const dragStartSpy = spy()
-      const dragEnterSpy = spy()
-      const dragOverSpy = spy()
-      const dragLeaveSpy = spy()
-      const component = mount(
-        <Dropzone
-          onDragStart={dragStartSpy}
-          onDragEnter={dragEnterSpy}
-          onDragOver={dragOverSpy}
-          onDragLeave={dragLeaveSpy}
-        />
-      )
+      const props = {
+        onDragStart: jest.fn(),
+        onDragEnter: jest.fn(),
+        onDragOver: jest.fn(),
+        onDragLeave: jest.fn()
+      }
+      const component = mount(<Dropzone {...props} />)
       component.simulate('dragStart')
+      expect(props.onDragStart).toHaveBeenCalled()
       component.simulate('dragEnter', { dataTransfer: { items: files } })
+      expect(props.onDragEnter).toHaveBeenCalled()
       component.simulate('dragOver', { dataTransfer: { items: files } })
+      expect(props.onDragOver).toHaveBeenCalled()
       component.simulate('dragLeave', { dataTransfer: { items: files } })
-      expect(dragStartSpy.callCount).toEqual(1)
-      expect(dragEnterSpy.callCount).toEqual(1)
-      expect(dragOverSpy.callCount).toEqual(1)
-      expect(dragLeaveSpy.callCount).toEqual(1)
+      expect(props.onDragLeave).toHaveBeenCalled()
     })
 
     it('should guard dropEffect in onDragOver for IE', () => {
-      const dragStartSpy = spy()
-      const dragEnterSpy = spy()
-      const dragLeaveSpy = spy()
-      const component = mount(
-        <Dropzone
-          onDragStart={dragStartSpy}
-          onDragEnter={dragEnterSpy}
-          onDragLeave={dragLeaveSpy}
-        />
-      )
+      const props = {
+        onDragStart: jest.fn(),
+        onDragEnter: jest.fn(),
+        onDragLeave: jest.fn()
+      }
+      const component = mount(<Dropzone {...props} />)
 
       // Using Proxy we'll emulate IE throwing when setting dataTransfer.dropEffect
       const eventProxy = new Proxy(
@@ -345,26 +341,29 @@ describe('Dropzone', () => {
       )
 
       // And using then we'll call the onDragOver with the proxy instead of event
-      const dragOverSpy = stub(component.instance(), 'onDragOver').callsFake(
-        component.instance().onDragOver(eventProxy)
-      )
+      const componentOnDragOver = component.instance().onDragOver
+      const onDragOver = jest
+        .spyOn(component.instance(), 'onDragOver')
+        .mockImplementation(() => componentOnDragOver(eventProxy))
 
       component.simulate('dragStart', { dataTransfer: { items: files } })
+      expect(props.onDragStart).toHaveBeenCalled()
       component.simulate('dragEnter', { dataTransfer: { items: files } })
-      component.simulate('dragOver', { dataTransfer: { items: files } })
+      expect(props.onDragEnter).toHaveBeenCalled()
       component.simulate('dragLeave', { dataTransfer: { items: files } })
-      expect(dragStartSpy.callCount).toEqual(1)
-      expect(dragEnterSpy.callCount).toEqual(1)
-      expect(dragLeaveSpy.callCount).toEqual(1)
+      expect(props.onDragLeave).toHaveBeenCalled()
       // It should not throw the error
-      expect(dragOverSpy).not.toThrow()
-      dragOverSpy.restore()
+      component.simulate('dragOver', { dataTransfer: { items: files } })
+      expect(onDragOver).not.toThrow()
     })
 
     it('should set proper dragActive state on dragEnter', async () => {
       const dropzone = mount(<Dropzone>{props => <DummyChildComponent {...props} />}</Dropzone>)
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files } })
+
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
+
       expect(child).toHaveProp('isDragActive', true)
       expect(child).toHaveProp('isDragAccept', true)
       expect(child).toHaveProp('isDragReject', false)
@@ -374,10 +373,11 @@ describe('Dropzone', () => {
       const dropzone = mount(
         <Dropzone accept="image/*">{props => <DummyChildComponent {...props} />}</Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', {
+      dropzone.simulate('dragEnter', {
         dataTransfer: { files: files.concat(images) }
       })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragActive', true)
       expect(child).toHaveProp('isDragAccept', false)
       expect(child).toHaveProp('isDragReject', true)
@@ -389,8 +389,9 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragActive', true)
       expect(child).toHaveProp('isDragAccept', false)
       expect(child).toHaveProp('isDragReject', true)
@@ -402,8 +403,9 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragActive', true)
       expect(child).toHaveProp('isDragAccept', true)
       expect(child).toHaveProp('isDragReject', true)
@@ -415,10 +417,16 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragActive', true)
-      expect(dropzone.hasClass('👏')).toBe(true)
+      expect(
+        dropzone
+          .children()
+          .first()
+          .hasClass('👏')
+      ).toBe(true)
     })
 
     it('should set rejectClassName properly', async () => {
@@ -427,10 +435,16 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragReject', true)
-      expect(dropzone.hasClass('👎')).toBe(true)
+      expect(
+        dropzone
+          .children()
+          .first()
+          .hasClass('👎')
+      ).toBe(true)
     })
 
     it('should set acceptClassName properly', async () => {
@@ -439,14 +453,20 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const child = updatedDropzone.find(DummyChildComponent)
       expect(child).toHaveProp('isDragAccept', true)
-      expect(dropzone.hasClass('👍')).toBe(true)
+      expect(
+        updatedDropzone
+          .children()
+          .first()
+          .hasClass('👍')
+      ).toBe(true)
     })
 
     it('should set disabledClassName properly', () => {
-      const dropzone = mount(
+      const dropzone = render(
         <Dropzone disabled disabledClassName="🤐">
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
@@ -474,8 +494,9 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: [images[0]] } })
-      const mainDiv = dropzone.find('div').at(0)
+      dropzone.simulate('dragEnter', { dataTransfer: { files: [images[0]] } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const mainDiv = updatedDropzone.find('div').at(0)
       expect(mainDiv).toHaveProp('style', { position: 'relative', ...acceptStyle })
     })
 
@@ -490,8 +511,9 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: [files[0]] } })
-      const mainDiv = dropzone.find('div').at(0)
+      dropzone.simulate('dragEnter', { dataTransfer: { files: [files[0]] } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const mainDiv = updatedDropzone.find('div').at(0)
       expect(mainDiv).toHaveProp('style', { position: 'relative', ...rejectStyle })
     })
 
@@ -506,8 +528,9 @@ describe('Dropzone', () => {
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
-      const mainDiv = dropzone.find('div').at(0)
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      const mainDiv = updatedDropzone.find('div').at(0)
       const expectedStyle = {
         position: 'relative',
         ...acceptStyle,
@@ -520,16 +543,16 @@ describe('Dropzone', () => {
       const dropzone = mount(
         <Dropzone accept="image/*">{props => <DummyChildComponent {...props} />}</Dropzone>
       )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
-      expect(child).toHaveProp('isDragActive', true)
-      expect(child).toHaveProp('isDragAccept', true)
-      expect(child).toHaveProp('isDragReject', false)
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const updatedDropzone = await flushPromises(dropzone)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragActive', true)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragAccept', true)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragReject', false)
 
       dropzone.setProps({ accept: 'text/*' })
-      expect(child).toHaveProp('isDragActive', true)
-      expect(child).toHaveProp('isDragAccept', false)
-      expect(child).toHaveProp('isDragReject', true)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragActive', true)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragAccept', false)
+      expect(updatedDropzone.find(DummyChildComponent)).toHaveProp('isDragReject', true)
     })
 
     it('should expose state to children', async () => {
@@ -575,87 +598,76 @@ describe('Dropzone', () => {
       // make sure we handle any duplicate dragEnter events that the browser may send us
       await dropzone.simulate('dragEnter', { dataTransfer: { files } })
       const dragActiveChild = dropzone.find(DragActiveComponent)
-      expect(dragActiveChild).toBePresent()
+      expect(dragActiveChild).toExist()
       expect(dragActiveChild).toHaveProp('isDragAccept', true)
       expect(dragActiveChild).toHaveProp('isDragReject', false)
 
       dropzone.simulate('dragLeave', { dataTransfer: { files } })
-      expect(dropzone.find(DragActiveComponent)).toBeEmpty()
-      expect(child).toHaveProp('isDragAccept', false)
-      expect(child).toHaveProp('isDragReject', false)
+      expect(dropzone.find(DragActiveComponent).children()).toHaveLength(0)
+      expect(dropzone.find(ChildComponent)).toHaveProp('isDragAccept', false)
+      expect(dropzone.find(ChildComponent)).toHaveProp('isDragReject', false)
     })
   })
 
   describe('onDrop', () => {
-    let dropSpy
-    let dropAcceptedSpy
-    let dropRejectedSpy
+    const expectedEvent = expect.anything()
+    const onDrop = jest.fn()
+    const onDropAccepted = jest.fn()
+    const onDropRejected = jest.fn()
 
-    beforeEach(() => {
-      dropSpy = spy()
-      dropAcceptedSpy = spy()
-      dropRejectedSpy = spy()
-    })
+    it('should update the acceptedFiles/rejectedFiles state', async () => {
+      let dropzone = mount(
+        <Dropzone accept="image/*">{props => <DummyChildComponent {...props} />}</Dropzone>
+      )
+      dropzone.simulate('drop', { dataTransfer: { files } })
+      dropzone = await flushPromises(dropzone)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('acceptedFiles', [])
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('rejectedFiles', files)
 
-    afterEach(() => {
-      dropSpy.reset()
-      dropAcceptedSpy.reset()
-      dropRejectedSpy.reset()
+      dropzone.simulate('drop', { dataTransfer: { files: images } })
+      dropzone = await flushPromises(dropzone)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('acceptedFiles', images)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('rejectedFiles', [])
     })
 
     it('should reset the dragActive/dragReject state', async () => {
-      const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-        >
-          {props => <DummyChildComponent {...props} />}
-        </Dropzone>
-      )
-      const child = dropzone.find(DummyChildComponent)
-      await dropzone.simulate('dragEnter', { dataTransfer: { files } })
-      expect(child).toHaveProp('isDragActive', true)
-      expect(child).toHaveProp('isDragReject', false)
+      let dropzone = mount(<Dropzone>{props => <DummyChildComponent {...props} />}</Dropzone>)
+      dropzone.simulate('dragEnter', { dataTransfer: { files } })
+      dropzone = await flushPromises(dropzone)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('isDragActive', true)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('isDragReject', false)
       dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(child).toHaveProp('isDragActive', false)
-      expect(child).toHaveProp('isDragReject', false)
+      dropzone = await flushPromises(dropzone)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('isDragActive', false)
+      expect(dropzone.find(DummyChildComponent)).toHaveProp('isDragReject', false)
     })
 
     it('should reject invalid file when multiple is false', async () => {
-      const dropzone = mount(<Dropzone accept="image/*" onDrop={dropSpy} multiple={false} />)
+      const dropzone = mount(<Dropzone accept="image/*" onDrop={onDrop} multiple={false} />)
       await dropzone.simulate('drop', {
         dataTransfer: { files }
       })
-      const [accepted, rejected] = dropSpy.firstCall.args
-      expect(rejected.length).toEqual(1)
-      expect(accepted.length).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
     })
 
     it('should allow single files to be dropped if multiple is false', async () => {
-      const dropzone = mount(<Dropzone accept="image/*" onDrop={dropSpy} multiple={false} />)
+      const dropzone = mount(<Dropzone accept="image/*" onDrop={onDrop} multiple={false} />)
 
       await dropzone.simulate('drop', { dataTransfer: { files: [images[0]] } })
-      const [accepted, rejected] = dropSpy.firstCall.args
-      expect(accepted.length).toEqual(1)
-      expect(rejected.length).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith([images[0]], [], expectedEvent)
     })
 
     it('should reject multiple files to be dropped if multiple is false', async () => {
-      const dropzone = mount(<Dropzone accept="image/*" onDrop={dropSpy} multiple={false} />)
+      const dropzone = mount(<Dropzone accept="image/*" onDrop={onDrop} multiple={false} />)
 
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      const [accepted, rejected] = dropSpy.firstCall.args
-      expect(accepted.length).toEqual(0)
-      expect(rejected.length).toEqual(2)
+      expect(onDrop).toHaveBeenCalledWith([], images, expectedEvent)
     })
 
     it('should take all dropped files if multiple is true', async () => {
-      const dropzone = mount(<Dropzone onDrop={dropSpy} multiple />)
+      const dropzone = mount(<Dropzone onDrop={onDrop} multiple />)
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropSpy.firstCall.args[0]).toHaveLength(2)
-      expect(dropSpy.firstCall.args[0][0].name).toEqual(images[0].name)
-      expect(dropSpy.firstCall.args[0][1].name).toEqual(images[1].name)
+      expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
     })
 
     it('should set this.isFileDialogActive to false', async () => {
@@ -666,112 +678,90 @@ describe('Dropzone', () => {
     })
 
     it('should always call onDrop callback with accepted and rejected arguments', async () => {
-      const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-          accept="image/*"
-        />
-      )
+      const dropzone = mount(<Dropzone onDrop={onDrop} accept="image/*" />)
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toEqual([], [...files])
+      expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
+      onDrop.mockClear()
+
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropSpy.callCount).toEqual(2)
-      expect(dropSpy.lastCall.args[0]).toEqual([...images], [])
+      expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
+      onDrop.mockClear()
+
       await dropzone.simulate('drop', {
         dataTransfer: { files: files.concat(images) }
       })
-      expect(dropSpy.callCount).toEqual(3)
-      expect(dropSpy.lastCall.args[0]).toEqual([...images], [...files])
+      expect(onDrop).toHaveBeenCalledWith(images, files, expectedEvent)
     })
 
     it('should call onDropAccepted callback if some files were accepted', async () => {
-      const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-          accept="image/*"
-        />
-      )
+      const dropzone = mount(<Dropzone onDropAccepted={onDropAccepted} accept="image/*" />)
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropAcceptedSpy.callCount).toEqual(0)
+      expect(onDropAccepted).not.toHaveBeenCalled()
+      onDropAccepted.mockClear()
+
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images])
+      expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
+      onDropAccepted.mockClear()
+
       await dropzone.simulate('drop', {
         dataTransfer: { files: files.concat(images) }
       })
-      expect(dropAcceptedSpy.callCount).toEqual(2)
-      expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images])
+      expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
     })
 
     it('should call onDropRejected callback if some files were rejected', async () => {
-      const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-          accept="image/*"
-        />
-      )
-      await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropRejectedSpy.callCount).toEqual(1)
-      expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files])
+      const dropzone = mount(<Dropzone onDropRejected={onDropRejected} accept="image/*" />)
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropRejectedSpy.callCount).toEqual(1)
+      expect(onDropRejected).not.toHaveBeenCalled()
+      onDropRejected.mockClear()
+
+      await dropzone.simulate('drop', { dataTransfer: { files } })
+      expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
+      onDropRejected.mockClear()
+
       await dropzone.simulate('drop', {
         dataTransfer: { files: files.concat(images) }
       })
-      expect(dropRejectedSpy.callCount).toEqual(2)
-      expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files])
+      expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
     })
 
     it('applies the accept prop to the dropped files', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           accept="image/*"
         />
       )
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(0)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(1)
-      expect(dropAcceptedSpy.callCount).toEqual(0)
-      expect(dropRejectedSpy.callCount).toEqual(1)
-      expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1)
+      expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
+      expect(onDropAccepted).not.toHaveBeenCalled()
+      expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
     })
 
     it('applies the accept prop to the dropped images', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           accept="image/*"
         />
       )
 
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(2)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
 
     it('accepts a dropped image when Firefox provides a bogus file type', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           accept="image/*"
         />
       )
@@ -784,246 +774,236 @@ describe('Dropzone', () => {
       ]
 
       await dropzone.simulate('drop', { dataTransfer: { files: bogusImages } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(1)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(bogusImages, [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(bogusImages, expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
 
     it('accepts all dropped files and images when no accept prop is specified', async () => {
       const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-        />
+        <Dropzone onDrop={onDrop} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected} />
       )
       await dropzone.simulate('drop', {
         dataTransfer: { files: files.concat(images) }
       })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(3)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(files.concat(images), [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(files.concat(images), expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
 
     it('applies the maxSize prop to the dropped files', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           maxSize={1111}
         />
       )
 
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(1)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(1)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(files, [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(files, expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
 
     it('applies the maxSize prop to the dropped images', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           maxSize={1111}
         />
       )
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(0)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(2)
-      expect(dropAcceptedSpy.callCount).toEqual(0)
-      expect(dropRejectedSpy.callCount).toEqual(1)
-      expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(2)
+      expect(onDrop).toHaveBeenCalledWith([], images, expectedEvent)
+      expect(onDropAccepted).not.toHaveBeenCalled()
+      expect(onDropRejected).toHaveBeenCalledWith(images, expectedEvent)
     })
 
     it('applies the minSize prop to the dropped files', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           minSize={1112}
         />
       )
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(0)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(1)
-      expect(dropAcceptedSpy.callCount).toEqual(0)
-      expect(dropRejectedSpy.callCount).toEqual(1)
-      expect(dropRejectedSpy.firstCall.args[0]).toHaveLength(1)
+      expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
+      expect(onDropAccepted).not.toHaveBeenCalled()
+      expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
     })
 
     it('applies the minSize prop to the dropped images', async () => {
       const dropzone = mount(
         <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
           minSize={1112}
         />
       )
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(2)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(2)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
 
     it('accepts all dropped files and images when no size prop is specified', async () => {
       const dropzone = mount(
-        <Dropzone
-          onDrop={dropSpy}
-          onDropAccepted={dropAcceptedSpy}
-          onDropRejected={dropRejectedSpy}
-        />
+        <Dropzone onDrop={onDrop} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected} />
       )
       await dropzone.simulate('drop', {
         dataTransfer: { files: files.concat(images) }
       })
-      expect(dropSpy.callCount).toEqual(1)
-      expect(dropSpy.firstCall.args[0]).toHaveLength(3)
-      expect(dropSpy.firstCall.args[1]).toHaveLength(0)
-      expect(dropAcceptedSpy.callCount).toEqual(1)
-      expect(dropAcceptedSpy.firstCall.args[0]).toHaveLength(3)
-      expect(dropRejectedSpy.callCount).toEqual(0)
+      expect(onDrop).toHaveBeenCalledWith(files.concat(images), [], expectedEvent)
+      expect(onDropAccepted).toHaveBeenCalledWith(files.concat(images), expectedEvent)
+      expect(onDropRejected).not.toHaveBeenCalled()
     })
   })
 
   describe('preview', () => {
+    const expectedEvent = expect.anything()
+
     it('should generate previews for non-images', async () => {
-      const dropSpy = spy()
-      const dropzone = mount(<Dropzone onDrop={dropSpy} />)
+      const onDrop = jest.fn()
+      const dropzone = mount(<Dropzone onDrop={onDrop} />)
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(Object.keys(dropSpy.firstCall.args[0][0])).toContain('preview')
-      expect(dropSpy.firstCall.args[0][0].preview).toContain('data://file1.pdf')
+      expect(onDrop).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ preview: 'data://file1.pdf' })]),
+        [],
+        expectedEvent
+      )
     })
 
     it('should generate previews for images', async () => {
-      const dropSpy = spy()
-      const dropzone = mount(<Dropzone onDrop={dropSpy} />)
+      const onDrop = jest.fn()
+      const dropzone = mount(<Dropzone onDrop={onDrop} />)
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
-      expect(Object.keys(dropSpy.firstCall.args[0][0])).toContain('preview')
-      expect(dropSpy.firstCall.args[0][0].preview).toContain('data://cats.gif')
+      expect(onDrop).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ preview: 'data://cats.gif' })]),
+        [],
+        expectedEvent
+      )
     })
 
     it('should not throw error when preview cannot be created', async () => {
-      const dropSpy = spy()
-      const dropzone = mount(<Dropzone onDrop={dropSpy} />)
+      const onDrop = jest.fn()
+      const onConsoleError = jest.fn()
+      jest.spyOn(console, 'error').mockImplementationOnce(onConsoleError)
 
+      const dropzone = mount(<Dropzone onDrop={onDrop} />)
       await dropzone.simulate('drop', { dataTransfer: { files: ['bad_val'] } })
 
-      expect(Object.keys(dropSpy.firstCall.args[1][0])).not.toContain('preview')
+      expect(onConsoleError).toHaveBeenCalled()
+      expect(onDrop).not.toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ preview: expect.anything() })]),
+        [],
+        expectedEvent
+      )
     })
 
     it('should not generate previews if disablePreview is true', async () => {
-      const dropSpy = spy()
-      const dropzone = mount(<Dropzone disablePreview onDrop={dropSpy} />)
+      const onDrop = jest.fn()
+      const dropzone = mount(<Dropzone disablePreview onDrop={onDrop} />)
       await dropzone.simulate('drop', { dataTransfer: { files: images } })
+      expect(onDrop).not.toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ preview: expect.anything() })]),
+        [],
+        expectedEvent
+      )
+      onDrop.mockClear()
+
       await dropzone.simulate('drop', { dataTransfer: { files } })
-      expect(dropSpy.callCount).toEqual(2)
-      expect(Object.keys(dropSpy.firstCall.args[0][0])).not.toContain('preview')
-      expect(Object.keys(dropSpy.lastCall.args[0][0])).not.toContain('preview')
+      expect(onDrop).not.toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ preview: expect.anything() })]),
+        [],
+        expectedEvent
+      )
     })
   })
 
   describe('onClick', () => {})
 
   describe('onCancel', () => {
-    it('should not invoke onFileDialogCancel everytime window receives focus', done => {
-      const onCancelSpy = spy()
-      mount(<Dropzone id="on-cancel-example" onFileDialogCancel={onCancelSpy} />)
+    beforeEach(() => {
+      jest.useFakeTimers(true)
+    })
+
+    afterEach(() => {
+      jest.useFakeTimers(false)
+    })
+
+    it('should not invoke onFileDialogCancel everytime window receives focus', () => {
+      const onFileDialogCancel = jest.fn()
+      mount(<Dropzone id="on-cancel-example" onFileDialogCancel={onFileDialogCancel} />)
       // Simulated DOM event - onfocus
       document.body.addEventListener('focus', () => {})
       const evt = document.createEvent('HTMLEvents')
       evt.initEvent('focus', false, true)
       document.body.dispatchEvent(evt)
-      // setTimeout to match the event callback from actual Component
-      setTimeout(() => {
-        expect(onCancelSpy.callCount).toEqual(0)
-        done()
-      }, 300)
+      jest.runAllTimers()
+      expect(onFileDialogCancel).not.toHaveBeenCalled()
     })
 
-    it('should invoke onFileDialogCancel when window receives focus via cancel button', done => {
-      const onCancelSpy = spy()
+    it('should invoke onFileDialogCancel when window receives focus via cancel button', () => {
+      const onFileDialogCancel = jest.fn()
       const component = mount(
-        <Dropzone className="dropzone-content" onFileDialogCancel={onCancelSpy} />
+        <Dropzone className="dropzone-content" onFileDialogCancel={onFileDialogCancel} />
       )
 
       // Test / invoke the click event
-      spy(component.instance(), 'open')
+      const open = jest.spyOn(component.instance(), 'open')
       component.simulate('click')
 
-      setTimeout(() => {
-        expect(component.instance().open.callCount).toEqual(1)
+      expect(open).toHaveBeenCalled()
 
-        // Simulated DOM event - onfocus
-        window.addEventListener('focus', () => {})
-        const evt = document.createEvent('HTMLEvents')
-        evt.initEvent('focus', false, true)
-        window.dispatchEvent(evt)
+      // Simulated DOM event - onfocus
+      window.addEventListener('focus', () => {})
+      const evt = document.createEvent('HTMLEvents')
+      evt.initEvent('focus', false, true)
+      window.dispatchEvent(evt)
 
-        // setTimeout to match the event callback from actual Component
-        setTimeout(() => {
-          expect(onCancelSpy.callCount).toEqual(1)
-          done()
-        }, 300)
-      }, 0)
+      jest.runAllTimers()
+      expect(onFileDialogCancel).toHaveBeenCalled()
     })
 
-    it('should restore isFileDialogActive to false after the FileDialog was closed', done => {
+    it('should restore isFileDialogActive to false after the FileDialog was closed', () => {
       const component = mount(<Dropzone />)
 
-      spy(component.instance(), 'open')
       component.simulate('click')
 
-      setTimeout(() => {
-        expect(component.instance().isFileDialogActive).toEqual(true)
+      expect(component.instance().isFileDialogActive).toEqual(true)
 
-        const evt = document.createEvent('HTMLEvents')
-        evt.initEvent('focus', false, true)
-        window.dispatchEvent(evt)
+      const evt = document.createEvent('HTMLEvents')
+      evt.initEvent('focus', false, true)
+      window.dispatchEvent(evt)
 
-        setTimeout(() => {
-          expect(component.instance().isFileDialogActive).toEqual(false)
-          done()
-        }, 300)
-      }, 0)
+      jest.runAllTimers()
+      expect(component.instance().isFileDialogActive).toEqual(false)
     })
   })
 
   describe('nested Dropzone component behavior', () => {
-    let outerDropzone
-    let innerDropzone
-    let outerDropSpy
-    let outerDropAcceptedSpy
-    let outerDropRejectedSpy
-    let innerDropSpy
-    let innerDropAcceptedSpy
-    let innerDropRejectedSpy
+    const expectedEvent = expect.anything()
+    const onOuterDrop = jest.fn()
+    const onOuterDropAccepted = jest.fn()
+    const onOuterDropRejected = jest.fn()
+
+    const onInnerDrop = jest.fn()
+    const onInnerDropAccepted = jest.fn()
+    const onInnerDropRejected = jest.fn()
 
     const InnerDragAccepted = () => <p>Accepted</p>
     const InnerDragRejected = () => <p>Rejected</p>
     const InnerDropzone = () => (
       <Dropzone
-        onDrop={innerDropSpy}
-        onDropAccepted={innerDropAcceptedSpy}
-        onDropRejected={innerDropRejectedSpy}
+        onDrop={onInnerDrop}
+        onDropAccepted={onInnerDropAccepted}
+        onDropRejected={onInnerDropRejected}
         accept="image/*"
       >
         {({ isDragActive, isDragReject }) => {
@@ -1035,62 +1015,76 @@ describe('Dropzone', () => {
     )
 
     describe('dropping on the inner dropzone', () => {
-      it('mounts both dropzones', () => {
-        outerDropSpy = spy()
-        outerDropAcceptedSpy = spy()
-        outerDropRejectedSpy = spy()
-        innerDropSpy = spy()
-        innerDropAcceptedSpy = spy()
-        innerDropRejectedSpy = spy()
-        outerDropzone = mount(
+      it('does dragEnter on both dropzones', async () => {
+        const outerDropzone = mount(
+          <Dropzone accept="image/*">{props => <InnerDropzone {...props} />}</Dropzone>
+        )
+        outerDropzone.find(InnerDropzone).simulate('dragEnter', {
+          dataTransfer: { files: images }
+        })
+        const updatedOuterDropzone = await flushPromises(outerDropzone)
+        const innerDropzone = updatedOuterDropzone.find(InnerDropzone)
+
+        expect(innerDropzone).toHaveProp('isDragActive', true)
+        expect(innerDropzone).toHaveProp('isDragReject', false)
+        expect(innerDropzone.find(InnerDragAccepted)).toExist()
+        expect(innerDropzone.find(InnerDragRejected)).not.toExist()
+      })
+
+      it('accepts the drop on the inner dropzone', async () => {
+        const outerDropzone = mount(
           <Dropzone
-            onDrop={outerDropSpy}
-            onDropAccepted={outerDropAcceptedSpy}
-            onDropRejected={outerDropRejectedSpy}
+            onDrop={onOuterDrop}
+            onDropAccepted={onOuterDropAccepted}
+            onDropRejected={onOuterDropRejected}
             accept="image/*"
           >
             {props => <InnerDropzone {...props} />}
           </Dropzone>
         )
-        innerDropzone = outerDropzone.find(InnerDropzone)
-      })
 
-      it('does dragEnter on both dropzones', async () => {
-        await innerDropzone.simulate('dragEnter', {
-          dataTransfer: { files: images }
+        outerDropzone.find(InnerDropzone).simulate('drop', {
+          dataTransfer: { files: files.concat(images) }
         })
-        expect(innerDropzone).toHaveProp('isDragActive', true)
-        expect(innerDropzone).toHaveProp('isDragReject', false)
-        expect(innerDropzone.find(InnerDragAccepted).exists()).toEqual(true)
-        expect(innerDropzone.find(InnerDragRejected).exists()).toEqual(false)
+        const updatedOuterDropzone = await flushPromises(outerDropzone)
+        const innerDropzone = updatedOuterDropzone.find(InnerDropzone)
+
+        expect(onInnerDrop).toHaveBeenCalledTimes(1)
+        expect(onInnerDrop).toHaveBeenCalledWith(images, files, expectedEvent)
+        expect(onInnerDropAccepted).toHaveBeenCalledTimes(1)
+        expect(onInnerDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
+        expect(onInnerDropRejected).toHaveBeenCalledTimes(1)
+        expect(onInnerDropRejected).toHaveBeenCalledWith(files, expectedEvent)
+
+        expect(innerDropzone.find(InnerDragAccepted)).not.toExist()
+        expect(innerDropzone.find(InnerDragRejected)).not.toExist()
       })
 
-      it('drops on the child dropzone', () => {
-        innerDropzone.simulate('drop', {
+      it('also accepts the drop on the outer dropzone', async () => {
+        const outerDropzone = mount(
+          <Dropzone
+            onDrop={onOuterDrop}
+            onDropAccepted={onOuterDropAccepted}
+            onDropRejected={onOuterDropRejected}
+            accept="image/*"
+          >
+            {props => <InnerDropzone {...props} />}
+          </Dropzone>
+        )
+
+        outerDropzone.simulate('drop', {
           dataTransfer: { files: files.concat(images) }
         })
-      })
+        const updatedOuterDropzone = await flushPromises(outerDropzone)
 
-      it('accepts the drop on the inner dropzone', () => {
-        expect(innerDropSpy.callCount).toEqual(1)
-        expect(innerDropSpy.firstCall.args[0]).toHaveLength(2)
-        expect(innerDropSpy.firstCall.args[1]).toHaveLength(1)
-        expect(innerDropAcceptedSpy.callCount).toEqual(1)
-        expect(innerDropAcceptedSpy.firstCall.args[0]).toHaveLength(2)
-        expect(innerDropRejectedSpy.callCount).toEqual(1)
-        expect(innerDropRejectedSpy.firstCall.args[0]).toHaveLength(1)
-        expect(innerDropzone.find(InnerDragAccepted).exists()).toEqual(false)
-        expect(innerDropzone.find(InnerDragRejected).exists()).toEqual(false)
-      })
+        const innerDropzone = updatedOuterDropzone.find(InnerDropzone)
 
-      it('also accepts the drop on the outer dropzone', () => {
-        expect(outerDropSpy.callCount).toEqual(1)
-        expect(outerDropSpy.firstCall.args[0]).toHaveLength(2)
-        expect(outerDropSpy.firstCall.args[1]).toHaveLength(1)
-        expect(outerDropAcceptedSpy.callCount).toEqual(1)
-        expect(outerDropAcceptedSpy.firstCall.args[0]).toHaveLength(2)
-        expect(outerDropRejectedSpy.callCount).toEqual(1)
-        expect(outerDropRejectedSpy.firstCall.args[0]).toHaveLength(1)
+        expect(onOuterDrop).toHaveBeenCalledTimes(1)
+        expect(onOuterDrop).toHaveBeenCalledWith(images, files, expectedEvent)
+        expect(onOuterDropAccepted).toHaveBeenCalledTimes(1)
+        expect(onOuterDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
+        expect(onOuterDropRejected).toHaveBeenCalledTimes(1)
+        expect(onOuterDropRejected).toHaveBeenCalledWith(files, expectedEvent)
         expect(innerDropzone).toHaveProp('isDragActive', false)
         expect(innerDropzone).toHaveProp('isDragReject', false)
       })
@@ -1105,28 +1099,22 @@ describe('Dropzone', () => {
       expect(fn).not.toThrow()
     })
 
-    it('does not allow actions when disabled props is true', done => {
+    it('does not allow actions when disabled props is true', () => {
       const dropzone = mount(<Dropzone disabled />)
 
-      spy(dropzone.instance(), 'open')
+      const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('click')
-      setTimeout(() => {
-        expect(dropzone.instance().open.callCount).toEqual(0)
-        done()
-      }, 0)
+      expect(open).not.toHaveBeenCalled()
     })
 
-    it('when toggle disabled props, Dropzone works as expected', done => {
+    it('when toggle disabled props, Dropzone works as expected', () => {
       const dropzone = mount(<Dropzone disabled />)
-      spy(dropzone.instance(), 'open')
+      const open = jest.spyOn(dropzone.instance(), 'open')
 
       dropzone.setProps({ disabled: false })
 
       dropzone.simulate('click')
-      setTimeout(() => {
-        expect(dropzone.instance().open.callCount).toEqual(1)
-        done()
-      }, 0)
+      expect(open).toHaveBeenCalled()
     })
   })
 })