useDocument tests: update to latest recommended pattern

see https://github.com/testing-library/react-hooks-testing-library#a-note-about-react-18-support
and testing-library/react-hooks-testing-library#654 (comment)
and testing-library/react-testing-library#1101

Author: HerbCaudill

packages/automerge-repo-react-hooks/test/useDocument.test.tsx

@@ -1,11 +1,12 @@
 import { PeerId, Repo, AutomergeUrl } from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
-import { describe, it } from "vitest"
+import { describe, expect, it } from "vitest"
 import { RepoContext } from "../src/useRepo"
 import { useDocument } from "../src/useDocument"
-import { renderHook } from "@testing-library/react-hooks"
+import { renderHook, waitFor } from "@testing-library/react"
 import React, { useState } from "react"
 import assert from "assert"
+import { act } from "react-dom/test-utils"
 
 interface ExampleDoc {
   foo: string
@@ -58,117 +59,102 @@ describe("useDocument", () => {
   it("should load a document", async () => {
     const { handleA, wrapper } = setup()
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useDocument(handleA.url),
-      { wrapper }
-    )
-
-    await waitForNextUpdate()
-
-    const [doc] = result.current
+    const { result } = renderHook(() => useDocument(handleA.url), { wrapper })
 
-    assert.deepStrictEqual(doc, { foo: "A" })
+    await waitFor(() => {
+      const [doc] = result.current
+      expect(doc).toMatchObject({ foo: "A" })
+    })
   })
 
   it("should update if the url changes", async () => {
     const { wrapper, handleA, handleB } = setup()
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => {
-        const [url, setUrl] = useState<AutomergeUrl>()
-        const [doc] = useDocument(url)
-
-        return {
-          setUrl,
-          doc,
-        }
-      },
-      { wrapper }
+    const { result } = await act(() =>
+      renderHook(
+        () => {
+          const [url, setUrl] = useState<AutomergeUrl>()
+          const [doc] = useDocument(url)
+          return { setUrl, doc }
+        },
+        { wrapper }
+      )
     )
 
-    // initially doc is undefined
-    assert.deepStrictEqual(result.current.doc, undefined)
+    await waitFor(() => expect(result.current).not.toBeNull())
 
     // set url to doc A
-    result.current.setUrl(handleA.url)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, { foo: "A" })
+    act(() => result.current.setUrl(handleA.url))
+    await waitFor(() => expect(result.current.doc).toMatchObject({ foo: "A" }))
 
     // set url to doc B
-    result.current.setUrl(handleB.url)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, { foo: "B" })
+    act(() => result.current.setUrl(handleB.url))
+    await waitFor(() => expect(result.current.doc).toMatchObject({ foo: "B" }))
 
     // set url to undefined
-    result.current.setUrl(undefined)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, undefined)
+    act(() => result.current.setUrl(undefined))
+    await waitFor(() => expect(result.current.doc).toBeUndefined())
   })
 
   it("sets the doc to undefined while the initial load is happening", async () => {
     const { wrapper, handleA, handleSlow } = setup()
 
-    const { result, waitForNextUpdate, waitFor } = renderHook(
-      () => {
-        const [url, setUrl] = useState<AutomergeUrl>()
-        const [doc] = useDocument(url)
-
-        return {
-          setUrl,
-          doc,
-        }
-      },
-      { wrapper }
+    const { result } = await act(() =>
+      renderHook(
+        () => {
+          const [url, setUrl] = useState<AutomergeUrl>()
+          const [doc] = useDocument(url)
+          return { setUrl, doc }
+        },
+        { wrapper }
+      )
     )
 
-    // initially doc is undefined
-    assert.deepStrictEqual(result.current.doc, undefined)
+    await waitFor(() => expect(result.current).not.toBeNull())
 
     // start by setting url to doc A
-    result.current.setUrl(handleA.url)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, { foo: "A" })
+    act(() => result.current.setUrl(handleA.url))
+    await waitFor(() => expect(result.current.doc).toMatchObject({ foo: "A" }))
 
     // Now we set the URL to a handle that's slow to load.
     // The doc should be undefined while the load is happening.
-    result.current.setUrl(handleSlow.url)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, undefined)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, { foo: "slow" })
+    act(() => result.current.setUrl(handleSlow.url))
+    await waitFor(() => expect(result.current.doc).toBeUndefined())
+    await waitFor(() =>
+      expect(result.current.doc).toMatchObject({ foo: "slow" })
+    )
   })
 
   it("avoids showing stale data", async () => {
     const { wrapper, handleA, handleSlow } = setup()
-
-    const { result, waitForNextUpdate, waitFor } = renderHook(
-      () => {
-        const [url, setUrl] = useState<AutomergeUrl>()
-        const [doc] = useDocument(url)
-
-        return {
-          setUrl,
-          doc,
-        }
-      },
-      { wrapper }
+    const { result } = await act(() =>
+      renderHook(
+        () => {
+          const [url, setUrl] = useState<AutomergeUrl>()
+          const [doc] = useDocument(url)
+          return { setUrl, doc }
+        },
+        { wrapper }
+      )
     )
 
-    // initially doc is undefined
-    assert.deepStrictEqual(result.current.doc, undefined)
+    await waitFor(() => expect(result.current).not.toBeNull())
 
     // Set the URL to a slow doc and then a fast doc.
     // We should see the fast doc forever, even after
     // the slow doc has had time to finish loading.
-    result.current.setUrl(handleSlow.url)
-    result.current.setUrl(handleA.url)
-    await waitForNextUpdate()
-    assert.deepStrictEqual(result.current.doc, { foo: "A" })
+    act(() => {
+      result.current.setUrl(handleSlow.url)
+      result.current.setUrl(handleA.url)
+    })
+    await waitFor(() => expect(result.current.doc).toMatchObject({ foo: "A" }))
 
     // wait for the slow doc to finish loading...
-    await new Promise(resolve => setTimeout(resolve, SLOW_DOC_LOAD_TIME_MS * 2))
+    await pause(SLOW_DOC_LOAD_TIME_MS * 2)
 
     // we didn't update the doc to the slow doc, so it should still be A
-    assert.deepStrictEqual(result.current.doc, { foo: "A" })
+    await waitFor(() => expect(result.current.doc).toMatchObject({ foo: "A" }))
   })
 })
+
+const pause = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))