反应测试库反应测试组件更新

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;

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

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