title: How to get the elements from a table after all components are rendered in React / testing-library/react?
body: <p>I'm trying to test my UsersTable page in React, but the testing library gets the elements before they have time to render.
  Please check my code below:</p>
  <p><strong>UsersTable.js</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Link } from 'react-router-dom';
  import Table from 'react-bootstrap/Table';
  import { fetchUsers } from 'api';
  
  
  function UsersTable() {
      const [users, setUsers] = useState([]);
  
      useEffect(() =&gt; {
          const getUsers = async () =&gt; {
              const data = await fetchUsers();
              setUsers(data);
          };
  
          getUsers();
      }, []);
  
  
      const renderUsers = () =&gt; users.map((user) =&gt; {
          const { id, fullName, email } = user;
  
          return (
              &lt;tr key={ id } &gt;
                  &lt;td&gt;
                      &lt;Link to={ `user/${id}` }&gt;{ fullName }&lt;/Link&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;Link to={ `user/${id}/mail` }&gt;{ email }&lt;/Link&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          );
      });
      return (
          &lt;div data-testid='userTest' className=&quot;users-table&quot;&gt;
              &lt;h1&gt;Users&lt;/h1&gt;
              &lt;Table striped borderless&gt;
                  &lt;thead&gt;
                      &lt;tr style={{
                              borderBottom: &quot;1px solid #cccccc&quot;
                          }}&gt; 
                          &lt;th&gt;User&lt;/th&gt;
                          &lt;th&gt;Email&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      { renderUsers() }
                  &lt;/tbody&gt;
              &lt;/Table&gt;
          &lt;/div&gt;
      );
  }
  
  export default UsersTable;
  </code></pre>
  <p><strong>userTable.test.js</strong></p>
  <pre><code>import { render } from '@testing-library/react'
  import React from 'react';
  import { BrowserRouter as Router } from 'react-router-dom';
  import '@testing-library/jest-dom/extend-expect';
  import UserTable from '../components/users/UserTable';
  
  
  
  
  test(&quot;Test #1: Count Users&quot;, async () =&gt; {
  
      const component = render(
          &lt;Router&gt;
              &lt;UserTable /&gt;
          &lt;/Router&gt;
      );
  
      const users = component.getByTestId('userTest')
      expect(users.querySelectorAll('tr').length).toBe(193)
  })
  </code></pre>
  <p><strong>Note</strong>: <code>&lt;Router&gt;</code> prevents the error <code>Error: Uncaught [Error: Invariant failed: You should not use &lt;Link&gt; outside a &lt;Router&gt;</code></p>
  <p><strong>Expect:</strong> Expecting to have 192 users + 1 row containing <code>thead</code>, but instead I get 1 row containing only the <code>thead</code>.</p>