在 React / testing-library/react 中呈现所有组件后，如何从表中获取元素？答案

【问题标题】：How to get the elements from a table after all components are rendered in React / testing-library/react?在 React / testing-library/react 中呈现所有组件后，如何从表中获取元素？
【发布时间】：2022-08-10 14:40:16
【问题描述】：

我正在尝试在 React 中测试我的 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)
})

笔记：<Router> 防止错误Error: Uncaught [Error: Invariant failed: You should not use <Link> outside a <Router>

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

见testing-library.com/docs/dom-testing-library/api-async
你在嘲笑你的fetchusers吗？你需要保证它的组件是用行和单元格呈现的表格，而不是 td chids 的数量......看看你应该避免使用测试库here。
但是如果你想测试tr的数量，你应该避免像你一样使用selectors。在这种情况下，正确的方法是 const trElements = screen.getAllByRole(\'row\') 和 expect(trElements).toHaveLength(193)
谢谢你的建议，路易斯。我最终测试了组件是否被渲染并测试了一些用户输入。非常感谢！

标签： javascript reactjs jestjs react-testing-library

【解决方案1】：

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

【讨论】：