Fix async act warning

package.json

@@ -45,7 +45,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^8.0.9",
     "@types/react": "^16.8.20",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -75,8 +75,8 @@
     "opencollective": "^1.0.3",
     "prettier": "^1.18.2",
     "prettier-eslint-cli": "^4.7.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "rollup": "^1.15.4",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",

src/Field.test.js

@@ -6,7 +6,13 @@ import Form from './ReactFinalForm'
 import Field from './Field'
 
 const onSubmitMock = values => {}
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
+async function sleep(ms) {
+  await act(async () => {
+    await timeout(ms)
+  })
+}
 
 describe('Field', () => {
   afterEach(cleanup)
@@ -285,7 +291,7 @@ describe('Field', () => {
       <Form onSubmit={onSubmitMock} subscription={{ values: true }}>
         {() => (
           <form>
-            <Field name="name" format={format} formatOnBlur>
+            <Field name="name" format={format} formatOnBlur initialValue="">
               {({ input }) => (
                 <input
                   {...input}
@@ -381,7 +387,11 @@ describe('Field', () => {
   it('should pass multiple through to custom components', () => {
     const CustomSelect = jest.fn(({ input }) => <select {...input} />)
     render(
-      <Form onSubmit={onSubmitMock} subscription={{ values: true }}>
+      <Form
+        onSubmit={onSubmitMock}
+        initialValues={{ name: [] }}
+        subscription={{ values: true }}
+      >
         {() => (
           <form>
             <Field name="name" component={CustomSelect} multiple />
@@ -858,16 +868,12 @@ describe('Field', () => {
   })
 
   it('should use isEqual to calculate dirty/pristine', () => {
+    const isEqual = (a, b) => (a && a.toUpperCase()) === (b && b.toUpperCase())
     const { getByTestId } = render(
       <Form onSubmit={onSubmitMock} initialValues={{ name: 'bob' }}>
         {() => (
           <form>
-            <Field
-              name="name"
-              isEqual={(a, b) =>
-                (a && a.toUpperCase()) === (b && b.toUpperCase())
-              }
-            >
+            <Field name="name" isEqual={isEqual}>
               {({ input, meta }) => (
                 <div>
                   <div data-testid="dirty">
@@ -1044,7 +1050,7 @@ describe('Field', () => {
               name="name"
               component="input"
               validate={async value => {
-                await sleep(5)
+                await timeout(5)
                 return value === 'erikras' ? 'Username taken' : undefined
               }}
               data-testid="name"

src/ReactFinalForm.test.js

@@ -1,13 +1,18 @@
 import React from 'react'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent, cleanup, act } from '@testing-library/react'
 import 'jest-dom/extend-expect'
 import deepEqual from 'fast-deep-equal'
 import { ErrorBoundary, Toggle, wrapWith } from './testUtils'
 import { createForm } from 'final-form'
 import { Form, Field, version, withTypes } from '.'
 
 const onSubmitMock = values => {}
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
+async function sleep(ms) {
+  await act(async () => {
+    await timeout(ms)
+  })
+}
 
 describe('ReactFinalForm', () => {
   afterEach(cleanup)
@@ -509,7 +514,7 @@ describe('ReactFinalForm', () => {
     const { getByTestId, getByText } = render(
       <Form
         onSubmit={async () => {
-          await sleep(2)
+          await timeout(2)
         }}
       >
         {({ handleSubmit }) => (
@@ -869,22 +874,8 @@ describe('ReactFinalForm', () => {
   })
 
   it('should set submitting back to false after submit', async () => {
-    /**
-     * This test causes a warning:
-     *
-     * Warning: An update to ReactFinalForm inside a test was not wrapped in act(...).
-     *
-     * ...but it's working as expected:
-     * 1) We click "Submit"
-     * 2) Submission is async and takes 1ms
-     * 3) The form's state has to go to `submitting = true` and then back to `submitting = false`
-     *
-     * That state change when the submission completes is not an "act" from the
-     * user, but an internal state change. If you have an idea of how to fix this,
-     * please submit a PR. Thanks. -@erikras
-     */
     const onSubmit = jest.fn(async () => {
-      sleep(1)
+      await timeout(1)
     })
     const recordSubmitting = jest.fn()
     const { getByText } = render(