1

新反应。什么是测试组件值更新的正确方法，这取决于其他组件中的操作？使用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});
});

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

4

1 回答 1

0

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

usernameInput.value = username;

与其手动设置 value 属性，不如使用该fireEvent方法更改值：

fireEvent.change(usernameInput, { target: { value: username } });
于 2019-11-13T03:43:28.170 回答