如何使用 React 测试库获取 div 的文本值？

Question

            <a className="stats__back" href="./..">
                &#129044;
            </a>
            <div className="profile-heading">ACCOUNT</div>
            <div className="profile-header">
                <div className="profile-avatar">
                    <img className="account-avatar" src={`./images/avatar${avatar}.png`} alt="User's avatar" width="150" height="150" />
                </div> 
                <div className="profile-header-info"> 
                    <div className="profile-username">{userName}</div>
                    <div className="profile-creation-date">

这是我正在处理的代码部分，我正在尝试使用 className="profil-username" 访问 div 进行单元测试。

这是我的测试结果：

test('New user name is set after user name edition.', () => {
    act(() => {
        ReactDOM.render(<Account/>, container);
    });

    let profileUserName = container.querySelector("div.profile-username");
    let editButton = container.querySelector('.edition-text');
    let editUserName = container.querySelector('.account_modal-nick-input');
    let okButton = container.querySelector('.modal-button-save');
    let newUserName = "newUserName";

    fireEvent.click(editButton);
    fireEvent.change(editUserName, {target: {value: newUserName}});
    fireEvent.click(okButton);

    expect(profileUserName.value).toBe(newUserName);
});

所以总的来说，我完全不熟悉反应和单元测试，我的最后一个问题是：如何使用 querySelector 获得这个特殊性 div 以及如何在这之后调用他的值，这只是通过写 divContainerVariableName.value 或其他东西

提前致谢

Answer 1

const profileUserName = container.querySelector("div.profile-username");
expect(profileUserName.textContent).toBe(newUserName);

如果你有多个.profile-username，它会得到第一个出现在dom树中。

您应该首先检查您是否首先定位了正确的 dom 元素，然后考虑获取它的文本上下文。

如何使用 React 测试库获取 div 的文本值？

How to get a div's text value with react testing library?

html

unit-testing

reactjs

react-testing-library