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;

與其手動設置 value 屬性，不如使用fireEvent方法來更改值：

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