fix async unit tests

* async act() to the rescue with React 16.9+

client/src/components/molecules/Dropzone.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, act } from '@testing-library/react'
 import Dropzone from './Dropzone'
 
 function mockData(files: any) {
@@ -38,15 +38,17 @@ test('invoke onDragEnter when dragenter event occurs', async () => {
     const data = mockData([file])
     const handleOnDrop = jest.fn()
 
-    const ui = <Dropzone handleOnDrop={handleOnDrop} />
+    await act(async () => {
-    const { container } = render(ui)
+        const ui = <Dropzone handleOnDrop={handleOnDrop} />
+        const { container } = render(ui)
 
-    // drop a file
+        // drop a file
-    const dropzone = container.querySelector('div')
+        const dropzone = container.querySelector('div')
-    dispatchEvt(dropzone, 'dragenter', data)
+        dispatchEvt(dropzone, 'dragenter', data)
-    dispatchEvt(dropzone, 'dragover', data)
+        dispatchEvt(dropzone, 'dragover', data)
-    dispatchEvt(dropzone, 'drop', data)
+        dispatchEvt(dropzone, 'drop', data)
-    await flushPromises(ui, container)
+        await flushPromises(ui, container)
+    })
 
     expect(handleOnDrop).toHaveBeenCalled()
 })

client/src/hooks/use-ipfs.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, wait, act } from '@testing-library/react'
 import useIpfs from './use-ipfs'
 
 export default function TestComponent() {
@@ -14,8 +14,14 @@ export default function TestComponent() {
 }
 
 describe('use-ipfs', () => {
-    it('renders without crashing', () => {
+    it('renders without crashing', async () => {
-        const { container } = render(<TestComponent />)
+        let element: any
-        expect(container.firstChild).toBeInTheDocument()
+
+        await act(async () => {
+            element = render(<TestComponent />)
+        })
+
+        expect(element.container.firstChild).toBeInTheDocument()
+        await wait(() => element.getByText('Ready'))
     })
 })

client/src/routes/Faucet/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act, wait } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import Faucet from '.'
@@ -32,11 +32,7 @@ const setup = () => {
     )
     const button = utils.getByText('Request ETH')
     const { container } = utils
-    return {
+    return { button, container, ...utils }
-        button,
-        container,
-        ...utils
-    }
 }
 
 describe('Faucet', () => {
@@ -47,17 +43,15 @@ describe('Faucet', () => {
 
     it('shows actions when connected', () => {
         const { button } = setup()
-
         expect(button).toBeInTheDocument()
         expect(button).not.toHaveAttribute('disabled')
     })
 
-    it('fires requestFromFaucet', () => {
+    it('fires requestFromFaucet', async () => {
-        const { button, getByText } = setup()
+        await act(async () => {
-
+            const { button } = setup()
-        fireEvent.click(button)
+            fireEvent.click(button)
+        })
         expect(userMockConnected.requestFromFaucet).toHaveBeenCalledTimes(1)
-        // check for spinner
-        expect(getByText('Getting ETH...')).toBeInTheDocument()
     })
 })

client/src/setupTests.js

@@ -2,19 +2,10 @@
 
 import '@testing-library/jest-dom/extend-expect'
 
-// this is just a little hack to silence a warning that we'll get until we
+// Filter out deprecation warnings caused by external dependencies
-// upgrade to 16.9: https://github.com/facebook/react/pull/14853
-// const originalError = console.error
 const originalWarning = console.warn
 
 beforeAll(() => {
-    // console.error = (...args) => {
-    //     if (/Warning.*not wrapped in act/.test(args[0])) {
-    //         return
-    //     }
-    //     originalError.call(console, ...args)
-    // }
-
     console.warn = (...args) => {
         if (/Warning.*componentWillMount has been renamed/.test(args[0])) {
             return
@@ -24,6 +15,5 @@ beforeAll(() => {
 })
 
 afterAll(() => {
-    // console.error = originalError
     console.warn = originalWarning
 })