title: React testing library how to use waitFor
body: <p>I'm following <a href="https://www.freecodecamp.org/news/8-simple-steps-to-start-testing-react-apps-using-react-testing-library-and-jest/" rel="noreferrer">a tutorial</a> on React testing. The tutorial has a simple component like this, to show how to test asynchronous actions:</p>
  <pre><code>import React from 'react'
  
  const TestAsync = () =&gt; {
    const [counter, setCounter] = React.useState(0)
  
    const delayCount = () =&gt; (
      setTimeout(() =&gt; {
        setCounter(counter + 1)
      }, 500)
    )
    
    return (
      &lt;&gt;
        &lt;h1 data-testid=&quot;counter&quot;&gt;{ counter }&lt;/h1&gt;
        &lt;button data-testid=&quot;button-up&quot; onClick={delayCount}&gt; Up&lt;/button&gt;
        &lt;button data-testid=&quot;button-down&quot; onClick={() =&gt; setCounter(counter - 1)}&gt;Down&lt;/button&gt;
      &lt;/&gt;
    )
  }
    
  export default TestAsync
  </code></pre>
  <p>And the test file is like this:</p>
  <pre><code>
  import React from 'react';
  import { render, cleanup, fireEvent, waitForElement } from '@testing-library/react';
  import TestAsync from './TestAsync'
  
  afterEach(cleanup);
    
  it('increments counter after 0.5s', async () =&gt; {
    const { getByTestId, getByText } = render(&lt;TestAsync /&gt;); 
  
    fireEvent.click(getByTestId('button-up'))
  
    const counter = await waitForElement(() =&gt; getByText('1')) 
  
    expect(counter).toHaveTextContent('1')
  });
  </code></pre>
  <p>The terminal says <code>waitForElement</code> has been deprecated and to use <code>waitFor</code> instead.</p>
  <p>How can I use <code>waitFor</code> in this test file?</p>