在渲染所有组件后，如何从表中获取元素？

Question

我正在尝试测试我在React中的Userstable页面，但是测试库在有时间渲染之前获得了元素。 请在下面查看我的代码：

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;

usertable.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)
})

note ：＆lt; router＆gt;预防错误错误：未介绍[错误：不变失败：您不应使用＆lt; link＆gt;外部A＆lt; router＆gt;

期望：期望有192个用户 + 1行包含thead ，但是我仅获得1行包含thead。

Answer 1

expect(getByTestId('userTest').children.length).toBe(193);

Answer 2

问题在于您的测试正在尝试访问useffect hook userstable 已完成获取和渲染数据之前。

您可以使用reacts @testing-library's findby或waitfor方法等待组件异步渲染组件数据。

import { render, screen, waitFor } from '@testing-library/react';
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import '@testing-library/jest-dom/extend-expect';
import UsersTable from '../components/users/UserTable';


jest.mock('api', () => ({ // Mocking fetch user API call
    fetchUsers: jest.fn(() =>
        Promise.resolve(
            Array.from({ length: 192 }, (_, i) => ({
                id: i + 1,
                fullName: `User ${i + 1}`,
                email: `user${i + 1}@example.com`,
            }))
        )
    ),
}));

test('Test #1: Count Users', async () => {
    render(
        <Router>
            <UsersTable />
        </Router>
    );

    // Waiting for the rows to rendered including the header row
    await waitFor(() => { 
        expect(screen.getAllByRole('row').length).toBe(193);
    });
});

这将保证在数据可用之前避免异步渲染并避免查询。