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 } });

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

1 个答案: