From 9daa49a0858c3fdb5edf17d49225b7cbca127ec3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 30 Oct 2019 10:30:01 +0100
Subject: [PATCH] fix async unit tests

* async act() to the rescue with React 16.9+
---
 .../components/molecules/Dropzone.test.tsx    | 20 ++++++++++---------
 client/src/hooks/use-ipfs.test.tsx            | 14 +++++++++----
 client/src/routes/Faucet/index.test.tsx       | 20 +++++++------------
 client/src/setupTests.js                      | 12 +----------
 4 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/client/src/components/molecules/Dropzone.test.tsx b/client/src/components/molecules/Dropzone.test.tsx
index 0bb858b..e6764cd 100644
--- a/client/src/components/molecules/Dropzone.test.tsx
+++ b/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} />
-    const { container } = render(ui)
+    await act(async () => {
+        const ui = <Dropzone handleOnDrop={handleOnDrop} />
+        const { container } = render(ui)
 
-    // drop a file
-    const dropzone = container.querySelector('div')
-    dispatchEvt(dropzone, 'dragenter', data)
-    dispatchEvt(dropzone, 'dragover', data)
-    dispatchEvt(dropzone, 'drop', data)
-    await flushPromises(ui, container)
+        // drop a file
+        const dropzone = container.querySelector('div')
+        dispatchEvt(dropzone, 'dragenter', data)
+        dispatchEvt(dropzone, 'dragover', data)
+        dispatchEvt(dropzone, 'drop', data)
+        await flushPromises(ui, container)
+    })
 
     expect(handleOnDrop).toHaveBeenCalled()
 })
diff --git a/client/src/hooks/use-ipfs.test.tsx b/client/src/hooks/use-ipfs.test.tsx
index ddd2689..494b008 100644
--- a/client/src/hooks/use-ipfs.test.tsx
+++ b/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', () => {
-        const { container } = render(<TestComponent />)
-        expect(container.firstChild).toBeInTheDocument()
+    it('renders without crashing', async () => {
+        let element: any
+
+        await act(async () => {
+            element = render(<TestComponent />)
+        })
+
+        expect(element.container.firstChild).toBeInTheDocument()
+        await wait(() => element.getByText('Ready'))
     })
 })
diff --git a/client/src/routes/Faucet/index.test.tsx b/client/src/routes/Faucet/index.test.tsx
index 7b5dbdc..0688483 100644
--- a/client/src/routes/Faucet/index.test.tsx
+++ b/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 {
-        button,
-        container,
-        ...utils
-    }
+    return { 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', () => {
-        const { button, getByText } = setup()
-
-        fireEvent.click(button)
+    it('fires requestFromFaucet', async () => {
+        await act(async () => {
+            const { button } = setup()
+            fireEvent.click(button)
+        })
         expect(userMockConnected.requestFromFaucet).toHaveBeenCalledTimes(1)
-        // check for spinner
-        expect(getByText('Getting ETH...')).toBeInTheDocument()
     })
 })
diff --git a/client/src/setupTests.js b/client/src/setupTests.js
index 1948c46..9b4aa56 100644
--- a/client/src/setupTests.js
+++ b/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
-// upgrade to 16.9: https://github.com/facebook/react/pull/14853
-// const originalError = console.error
+// Filter out deprecation warnings caused by external dependencies
 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
 })