Flaky Tests with user.type (missing characters)

[mzietlow]

• @testing-library/react version: 16.3.0
• Testing Framework and version: [email protected]
• DOM Environment: [email protected]

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.

[MatanBobi]

Hi @mzietlow, thanks for opening this. I actually tried to reproduce it on our reproduction repo and looks like the test is passing, might be something related to other dependencies you have? https://stackblitz.com/edit/rtl-template-xtnzzhex?file=src%2FDialogWithInput.test.tsx

[mzietlow]

Hi @MatanBobi, thanks for checking. I noticed you used happy-dom in your reproduction, while we’re running tests with jsdom. I tried with happy-dom as well and couldn’t reproduce the issue with it. However, I was able to reproduce it on my private machine (other than my machine at work) inside WSL2 with jsdom by increasing the input length, for example:

await user.type(textbox, "why-won't-you-type-this?".repeat(4));

Could you try running it with jsdom?