test: Add test for flushing before exiting waitFor

src/__tests__/end-to-end.js

@@ -2,8 +2,8 @@ import * as React from 'react'
 import {render, waitForElementToBeRemoved, screen, waitFor} from '../'
 
 describe.each([
-  ['real timers', () => jest.useRealTimers()],
-  ['fake legacy timers', () => jest.useFakeTimers('legacy')],
+  // ['real timers', () => jest.useRealTimers()],
+  // ['fake legacy timers', () => jest.useFakeTimers('legacy')],
   ['fake modern timers', () => jest.useFakeTimers('modern')],
 ])(
   'it waits for the data to be loaded in a macrotask using %s',
@@ -80,7 +80,7 @@ describe.each([
   ['fake legacy timers', () => jest.useFakeTimers('legacy')],
   ['fake modern timers', () => jest.useFakeTimers('modern')],
 ])(
-  'it waits for the data to be loaded in a microtask using %s',
+  'it waits for the data to be loaded in many microtask using %s',
   (label, useTimers) => {
     beforeEach(() => {
       useTimers()
@@ -162,3 +162,73 @@ describe.each([
     })
   },
 )
+
+describe.each([
+  ['real timers', () => jest.useRealTimers()],
+  ['fake legacy timers', () => jest.useFakeTimers('legacy')],
+  ['fake modern timers', () => jest.useFakeTimers('modern')],
+])(
+  'it waits for the data to be loaded in a microtask using %s',
+  (label, useTimers) => {
+    beforeEach(() => {
+      useTimers()
+    })
+
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+
+    const fetchAMessageInAMicrotask = () =>
+      Promise.resolve({
+        status: 200,
+        json: () => Promise.resolve({title: 'Hello World'}),
+      })
+
+    function ComponentWithMicrotaskLoader() {
+      const [fetchState, setFetchState] = React.useState({fetching: true})
+
+      React.useEffect(() => {
+        if (fetchState.fetching) {
+          fetchAMessageInAMicrotask().then(res => {
+            return res.json().then(data => {
+              setFetchState({todo: data.title, fetching: false})
+            })
+          })
+        }
+      }, [fetchState])
+
+      if (fetchState.fetching) {
+        return <p>Loading..</p>
+      }
+
+      return (
+        <div data-testid="message">Loaded this message: {fetchState.todo}</div>
+      )
+    }
+
+    test('waitForElementToBeRemoved', async () => {
+      render(<ComponentWithMicrotaskLoader />)
+      const loading = () => screen.getByText('Loading..')
+      await waitForElementToBeRemoved(loading)
+      expect(screen.getByTestId('message')).toHaveTextContent(/Hello World/)
+    })
+
+    test('waitFor', async () => {
+      render(<ComponentWithMicrotaskLoader />)
+      await waitFor(() => {
+        screen.getByText('Loading..')
+      })
+      await waitFor(() => {
+        screen.getByText(/Loaded this message:/)
+      })
+      expect(screen.getByTestId('message')).toHaveTextContent(/Hello World/)
+    })
+
+    test('findBy', async () => {
+      render(<ComponentWithMicrotaskLoader />)
+      await expect(screen.findByTestId('message')).resolves.toHaveTextContent(
+        /Hello World/,
+      )
+    })
+  },
+)