title: React Testing Library: How to find text in the document which is updated by setInterval?
body: <p>I got a counter (React hooks component) which renders a new number incrementally per second.
  How can I assert a certain number to be in the DOM while it's updated by the hook?</p>
  <p>Here's a <a href="https://codesandbox.io/s/infallible-beaver-zt1nm?file=/src/__tests__/Counter.test.js" rel="nofollow noreferrer">code sandbox link</a></p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  export default function Counter() {
    const [count, setCount] = useState(1);
  
    useEffect(() =&gt; {
      const intervalId = setInterval(function () {
        setCount(count + 1);
      }, 1000);
      return () =&gt; clearInterval(intervalId);
    });
  
    return &lt;span&gt;{count}&lt;/span&gt;;
  }
  </code></pre>
  <p>Failing test</p>
  <pre><code>  test(&quot;should be able to find 3 directly&quot;, async () =&gt; {
      render(&lt;Counter /&gt;);
  
      const three = await waitFor(() =&gt; screen.findByText(/3/i));
      expect(three).toBeInTheDocument();
    });
  </code></pre>
  <p>Passing test</p>
  <pre><code>  test(&quot;should render one and then two and then three&quot;, async () =&gt; {
      render(&lt;Counter /&gt;);
  
      const one = await waitFor(() =&gt; screen.findByText(/1/i));
      expect(one).toBeInTheDocument();
  
      const two = await waitFor(() =&gt; screen.findByText(/2/i));
      expect(two).toBeInTheDocument();
  
      const three = await waitFor(() =&gt; screen.findByText(/3/i));
      expect(three).toBeInTheDocument();
    });
  </code></pre>