Estoy tratando de probar mi página UsersTable en React, pero la biblioteca de prueba obtiene los elementos antes de que tengan tiempo de renderizar. Por favor, compruebe mi código a continuación:

UsersTable.js

 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(() => { const getUsers = async () => { const data = await fetchUsers(); setUsers(data); }; getUsers(); }, []); const renderUsers = () => users.map((user) => { const { id, fullName, email } = user; return ( <tr key={ id } > <td> <Link to={ `user/${id}` }>{ fullName }</Link> </td> <td> <Link to={ `user/${id}/mail` }>{ email }</Link> </td> </tr> ); }); return ( <div data-testid='userTest' className="users-table"> <h1>Users</h1> <Table striped borderless> <thead> <tr style={{ borderBottom: "1px solid #cccccc" }}> <th>User</th> <th>Email</th> </tr> </thead> <tbody> { renderUsers() } </tbody> </Table> </div> ); } export default UsersTable;

tabla de usuario.test.js

 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("Test #1: Count Users", async () => { const component = render( <Router> <UserTable /> </Router> ); const users = component.getByTestId('userTest') expect(users.querySelectorAll('tr').length).toBe(193) })

Nota : <Router> previene el error Error: Uncaught [Error: Invariant failed: You should not use <Link> outside a <Router>

Expectativa : espero tener 192 usuarios + 1 fila que contenga thead , pero en su lugar obtengo 1 fila que contiene solo thead .