title: ReactJS - RTL await
body: <p>I'm trying to use async method in RTL to get the elements which would appear after fetching data. In the <a href="https://testing-library.com/docs/dom-testing-library/api-async" rel="nofollow noreferrer">docs</a> they said <code>findBy</code> method is combination of <code>getBy</code> and <code>waitFor</code>. Is there any specific case when to use one of it?</p>
  <p>My case is:</p>
  <ol>
  <li>Show input elements after success fetching data</li>
  <li>Fire event change of each input</li>
  <li>Fire event click on submit button</li>
  <li>Show alert after success</li>
  </ol>
  <p>With this approach, my test always failed and return <code>Received length: 0</code></p>
  <pre><code>render(&lt;Component {...mockProps} /&gt;);
  const inputs = await screen.findAllByRole('textbox');
  expect(inputs).toHaveLength(5); //failed
  </code></pre>
  <p>But with this approach, my test get passed</p>
  <pre><code>render(&lt;Component {...mockProps} /&gt;);
  await waitFor(() =&gt; {
     const inputs = screen.getAllByRole('textbox');
     expect(inputs).toHaveLength(5); //passed
  });
  </code></pre>
  <p>How to get passed test with the first approach?</p>
  <p>Because i want to call async method again after the form submitted, should i do this?</p>
  <pre><code>await waitFor(async () =&gt; {
     const inputs = screen.getAllByRole('textbox');
     expect(inputs).toHaveLength(5);
  
     const [input1, input2, ...etc] = inputs;
     fireEvent.change(input1, {target: {value: 'first'}};
     ...etc
  
    await waitFor(() =&gt; {
       expect(screen.getByRole('alert')).toBeInTheDocument();
    })
  });
  </code></pre>