testing-library / testing-library/react-testing-library
Flaky Tests with user.type (missing characters)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
Description
@testing-library/reactversion: 16.3.0- Testing Framework and version:
vitest@3.2.4 - DOM Environment:
jsdom@27.0.0
Relevant code or config:
import {
Dialog,
DialogBody,
DialogContent,
DialogSurface,
DialogTitle,
} from "@fluentui/react-components";
const DialogWithInput = () => {
return (
<Dialog open={true}>
<DialogSurface>
<DialogBody>
<DialogTitle>Flaky RTL Test MWE</DialogTitle>
<DialogContent>
<input type="text" />
</DialogContent>
</DialogBody>
</DialogSurface>
</Dialog>
);
}
describe("DialogWithInput", () => {
it("accepts long text", async () => {
const user = userEvent.setup();
render(<DialogWithInput />);
const textbox = await screen.findByRole("textbox");
await user.type(textbox, "why-won't-you-type-this?");
await waitFor(async () =>
expect(textbox).toHaveValue("why-won't-you-type-this?")
);
});
});
What you did:
I tested whether a user could correctly modify a textbox using await user.type(<textbox>, <text-value>). The textbox is embedded inside a simple Fluent UI v9 Dialog component.
What happened:
user.type did not type the full text-value leading to a test failure:
Expected the element to have value:
why-won't-you-type-this?
Received:
why-wo
Reproduction:
Repo: https://github.com/[mzietlow/flaky-rtl-tests
Stackblitz (although I did not try it on stackblitz): https://stackblitz.com/github/mzietlow/flaky-rtl-tests
Problem description:
Tests are flaky. Especially on CI, where user.type tends to produce even fewer characters.
Suggested solution:
user.type should type all characters.
I was able to pass { delay: null } as a temporary workaround, but that is not really a solution.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided DialogWithInput reproduction and the user.type call, using the listed React Testing Library, Vitest, and jsdom versions. Reproduce the missing-character failure, compare it with the { delay: null } workaround, and verify that the full why-won't-you-type-this? value is entered reliably, especially under CI-like conditions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100