Use flushEffects instead of the rerender hack.

Author: ghengeveld

package-lock.json

@@ -47,7 +47,7 @@
     "jest-dom": "2.1.0",
     "react": "16.7.0-alpha.0",
     "react-dom": "16.7.0-alpha.0",
-    "react-testing-library": "5.2.3",
+    "react-testing-library": "5.3.1",
     "rimraf": "2.6.2"
   },
   "jest": {

package.json

@@ -1,6 +1,6 @@
 import "jest-dom/extend-expect"
 import React from "react"
-import { render, fireEvent, cleanup, waitForElement } from "react-testing-library"
+import { render, fireEvent, cleanup, waitForElement, flushEffects } from "react-testing-library"
 import { useAsync } from "."
 
 afterEach(cleanup)
@@ -13,16 +13,16 @@ const Async = ({ children = () => null, ...props }) => children(useAsync(props))
 test("useAsync returns render props", async () => {
   const promiseFn = () => new Promise(resolve => setTimeout(resolve, 0, "done"))
   const component = <Async promiseFn={promiseFn}>{({ data }) => data || null}</Async>
-  const { getByText, rerender } = render(component)
-  rerender(component) // needed to trigger useEffect
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("done"))
 })
 
 test("useAsync passes rejection error to children as render prop", async () => {
   const promiseFn = () => Promise.reject("oops")
   const component = <Async promiseFn={promiseFn}>{({ error }) => error || null}</Async>
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("oops"))
 })
 
@@ -37,8 +37,8 @@ test("useAsync passes isLoading boolean while the promise is running", async ()
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("done"))
   expect(states).toEqual([true, true, false])
 })
@@ -56,8 +56,8 @@ test("useAsync passes startedAt date when the promise starts", async () => {
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("started"))
 })
 
@@ -74,16 +74,16 @@ test("useAsync passes finishedAt date when the promise finishes", async () => {
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("done"))
 })
 
 test("useAsync passes reload function that re-runs the promise", async () => {
   const promiseFn = jest.fn().mockReturnValue(resolveTo("done"))
   const component = <Async promiseFn={promiseFn}>{({ reload }) => <button onClick={reload}>reload</button>}</Async>
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   expect(promiseFn).toHaveBeenCalledTimes(1)
   fireEvent.click(getByText("reload"))
   expect(promiseFn).toHaveBeenCalledTimes(2)
@@ -104,14 +104,14 @@ test("useAsync re-runs the promise when the value of 'watch' changes", () => {
   }
   const promiseFn = jest.fn().mockReturnValue(resolveTo())
   const component = <Counter>{count => <Async promiseFn={promiseFn} watch={count} />}</Counter>
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   expect(promiseFn).toHaveBeenCalledTimes(1)
   fireEvent.click(getByText("increment"))
-  rerender(component)
+  flushEffects()
   expect(promiseFn).toHaveBeenCalledTimes(2)
   fireEvent.click(getByText("increment"))
-  rerender(component)
+  flushEffects()
   expect(promiseFn).toHaveBeenCalledTimes(3)
 })
 
@@ -125,8 +125,8 @@ test("useAsync runs deferFn only when explicitly invoked, passing arguments and
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   expect(deferFn).not.toHaveBeenCalled()
   fireEvent.click(getByText("run"))
   expect(deferFn).toHaveBeenCalledWith("go", 1, expect.objectContaining({ deferFn, foo: "bar" }))
@@ -149,8 +149,8 @@ test("useAsync reload uses the arguments of the previous run", () => {
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   expect(deferFn).not.toHaveBeenCalled()
   fireEvent.click(getByText("run"))
   expect(deferFn).toHaveBeenCalledWith("go", 1, expect.objectContaining({ deferFn }))
@@ -187,8 +187,8 @@ test("useAsync invokes onResolve callback when promise resolves", async () => {
   const promiseFn = jest.fn().mockReturnValue(Promise.resolve("ok"))
   const onResolve = jest.fn()
   const component = <Async promiseFn={promiseFn} onResolve={onResolve} />
-  const { rerender } = render(component)
-  rerender(component)
+  render(component)
+  flushEffects()
   await Promise.resolve()
   expect(onResolve).toHaveBeenCalledWith("ok")
 })
@@ -197,8 +197,8 @@ test("useAsync invokes onReject callback when promise rejects", async () => {
   const promiseFn = jest.fn().mockReturnValue(Promise.reject("err"))
   const onReject = jest.fn()
   const component = <Async promiseFn={promiseFn} onReject={onReject} />
-  const { rerender } = render(component)
-  rerender(component)
+  render(component)
+  flushEffects()
   await Promise.resolve()
   expect(onReject).toHaveBeenCalledWith("err")
 })
@@ -207,8 +207,8 @@ test("useAsync cancels pending promise when unmounted", async () => {
   const promiseFn = jest.fn().mockReturnValue(Promise.resolve("ok"))
   const onResolve = jest.fn()
   const component = <Async promiseFn={promiseFn} onResolve={onResolve} />
-  const { unmount, rerender } = render(component)
-  rerender(component)
+  const { unmount } = render(component)
+  flushEffects()
   unmount()
   await Promise.resolve()
   expect(onResolve).not.toHaveBeenCalled()
@@ -222,10 +222,10 @@ test("useAsync cancels and restarts the promise when promiseFn changes", async (
   const component2 = <Async promiseFn={promiseFn2} onResolve={onResolve} />
   const { rerender } = render(component1)
   await Promise.resolve()
-  rerender(component1)
+  flushEffects()
   expect(promiseFn1).toHaveBeenCalled()
   rerender(component2)
-  rerender(component2)
+  flushEffects()
   expect(promiseFn2).toHaveBeenCalled()
   expect(onResolve).not.toHaveBeenCalledWith("one")
   await Promise.resolve()
@@ -235,8 +235,8 @@ test("useAsync cancels and restarts the promise when promiseFn changes", async (
 test("useAsync does not run promiseFn on mount when initialValue is provided", () => {
   const promiseFn = jest.fn().mockReturnValue(Promise.resolve())
   const component = <Async promiseFn={promiseFn} initialValue={{}} />
-  const { rerender } = render(component)
-  rerender(component)
+  render(component)
+  flushEffects()
   expect(promiseFn).not.toHaveBeenCalled()
 })
 
@@ -251,8 +251,8 @@ test("useAsync does not start loading when using initialValue", async () => {
       }}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("done"))
   expect(states).toEqual([false])
 })
@@ -264,8 +264,8 @@ test("useAsync passes initialValue to children immediately", async () => {
       {({ data }) => data}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("done"))
 })
 
@@ -277,8 +277,8 @@ test("useAsync sets error instead of data when initialValue is an Error object",
       {({ error }) => error.message}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("oops"))
 })
 
@@ -296,8 +296,8 @@ test("useAsync can be nested", async () => {
       )}
     </Async>
   )
-  const { getByText, rerender } = render(component)
-  rerender(component)
+  const { getByText } = render(component)
+  flushEffects()
   await waitForElement(() => getByText("outer undefined"))
   await waitForElement(() => getByText("outer inner"))
 })