final-form / final-form/react-final-form
Testing Library's user-event type method doesn't work without delay
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
This is probably a feature request, to be better compatible with widely used [Testing Library](https://testing-library.com/) and its handy [user-event](https://testing-library.com/docs/ecosystem-user-event/) library.
### What is the current behavior?
Testing Library's user-event library's [`type` method](https://testing-library.com/docs/ecosystem-user-event#typeelement-text-options) doesn't work with input fields controlled by React Final Form, unless I add a delay between the keystrokes. Without the delay, only the last keystroke is registered.
So this kind of a test:
```js
test("Final Form input field without delay", () => {
act(() => {
render();
});
act(() => {
userEvent.type(screen.getByLabelText("Final Form field"), "Yay!");
});
expect(screen.getByLabelText("Final Form field").value).toBe("Yay!");
});
```
fails like this:
```
● Final Form input field without delay
expect(received).toBe(expected) // Object.is equality
Expected: "Yay!"
Received: "!"
22 | userEvent.type(screen.getByLabelText("Final Form field"), "Yay!");
23 | });
> 24 | expect(screen.getByLabelText("Final Form field").value).toBe("Yay!");
| ^
25 | });
26 |
27 | test("Final Form input field with delay", async () => {
at Object. (src/MyForm.spec.jsx:24:59)
```
But this succeeds:
```js
test("Final Form input field with delay", async () => {
act(() => {
render();
});
await act(async () => {
await userEvent.type(screen.getByLabelText("Final Form field"), "Yay!", {
delay: 1
});
});
expect(screen.getByLabelText("Final Form field").value).toBe("Yay!");
});
```
### What is the expected behavior?
I would expect the first test to pass too, for more convenient test writing without unnecessary delays. Though I admit that it isn't realistic to type multiple keystrokes without any delay. 😄 But the same test passes without delay with a plain `input` element, and I would assume with many other libraries since there is no delay by default.
### Sandbox Link
I created tests that reproduce the failure in https://codesandbox.io/s/react-final-form-testing-library-nyozu, including a test case with a plain `input` field. Unfortunately I'm not able to run the tests there, but you can export the sandbox via _hamburger menu > File > Export to ZIP_, unzip it on your machine, install dependencies with `npm i`/`yarn` and run `npm test`/`yarn test`.
### What's your environment?
```
"@testing-library/react": "12.0.0",
"@testing-library/user-event": "13.1.9",
"final-form": "4.20.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-final-form": "6.5.3",
"react-scripts": "4.0.0"
```
Contributor guide
Assessment
This issue has not been assessed yet.