userEvent.type gets only last letter when inside a waitFor on v13.1.9

[AlonBru]

this is similar to #387

• @testing-library/user-event version:13.1.9

• Testing Framework and version:
• DOM Environment:
  • jest: 27.0.6,
• jsdom -16.6.0

Relevant code or config

 const { getByPlaceholderText } = render(<NameEdit />);

    const inputElement = getByPlaceholderText("your name");

    waitFor(() => userEvent.type(inputElement, "John"));

    // Assert
    expect(inputElement.value).toEqual("John");

What you did:
using the above test, expected the test to succeed
using the waitFor in this instance is necessary because I'm using Formik and otherwise get the act(..) error.
What happened:
failed with this error:

expect(received).toEqual(expected) // deep equality

Expected: "John"
Received: "n"

  15 |     waitFor(() => userEvent.type(inputElement, "John"));
  17 |     // Assert
> 18 |     expect(inputElement.value).toEqual("John");
  19 |   });
  20 | });

Reproduction repository:
https://codesandbox.io/s/bold-glitter-u98xb?file=/src/name-edit.spec.js:309-546

Problem description:
the value is the last character instead of entre string as expected
Suggested solution:
based on reading the thread of #387, may be an issue of nested act() functions

Update

I see now that the suggested way is to wrap the assertion with waitFor, but perhaps this is still a bug worth fixing?

[ph-fritsche]

This is not a bug.
React batches state changes in act. This is intended.
waitFor wraps everything in act as a change is expected and therefore the act warning that is supposed to help you detect unexpected state changes is unnecessary.

Because of batching the state changes all iterations inside userEvent.type take place on the previous render result - which has an empty field and therefore the typing result is nothing plus the char that is typed.

// typing 'John' inside act results in
act(() => { // start to batch
  setState('' + 'J')
  setState('' + 'o')
  setState('' + 'h')
  setState('' + 'n')
} // execute state change