react-testing-library react测试组件更新

Question

新的反应。测试依赖于其他组件中的操作的组件值更新的正确方法是什么？使用jest + react-testing-library。

假设只有2个组件(同级)和一个通过全局状态更新的值。

下面是测试结果：

it('updates default value on for submit click', async () => {
    const username = 'hello';

    const {getByTestId, container, rerender} = render(<App/>);

    //subscribe to DOM changes
    await waitForDomChange({container}).then(() => {
        const defaultUsername = getByTestId("username-value");
        expect(defaultUsername).toHaveTextContent(username);
    });

    //set username
    const usernameInput = getByTestId("username-input");
    usernameInput.value = username;
    expect(usernameInput.value).toBe(username);

    const submitBtn = getByTestId("btn-submit");
    // console.log(prettyDOM(submitBtn));
    fireEvent.click(submitBtn, {button: 0});
});

表单在一个组件中，值显示在另一个组件中。它们被同时渲染。在此测试中，第二个组件中的值永远不会更新。测试它的正确方法是什么？如果这是正确的方法-可能出了什么问题？

Answer 1

这个问题很老了，但看起来你的问题在这里：

usernameInput.value = username;

您应该使用fireEvent方法更改该值，而不是手动设置value属性：

fireEvent.change(usernameInput, { target: { value: username } });