Test fails if not wrapped into waitFor

[vincentaudebert]

• @testing-library/dom version: 10.0.0
• Testing Framework and version: vitest - 1.5.0
• DOM Environment: jsdom
• Node v20

Relevant code or config:

const smsCheckbox = screen.getByRole('checkbox', {
      name: 'sms',
})
expect(smsCheckbox).toBeEnabled()
expect(smsCheckbox).not.toBeChecked()
expect(
      screen.getByText('some.text'),
).toBeInTheDocument()
await userEvent.click(smsCheckbox)
expect(smsCheckbox).toBeChecked()

What you did:

Before bumping to testing-library/dom 10.0.0 this test was passing correctly.
Bumping to v10 is the only change.

What happened:

Error: expect(element).toBeChecked()

Received element is not checked:

❯ myfile.test.tsx:72:25
70| ).toBeInTheDocument()
71| await userEvent.click(smsCheckbox)
72| expect(smsCheckbox).toBeChecked()
| ^
73|
74| const smsInput = screen.getByLabelText('some.text')

Problem description:

If I wrap this line into a await waitFor() it passes again. Then my tests fail into another file with the same idea, waitFor fixes it...

Suggested solution:

No idea where it comes from, if any of you has an idea or same issue? Do I really need to apply waitFor everywhere? What could have changed with the v10 to cause this ?

Thanks in advance.

[MatanBobi]

Hi @vincentaudebert, thanks for opening this one.
This is not an expected behavior, I have a few guesses but without a proper reproduction, we won't be able to figure it out.
Any chance you can create a reproduction using https://testing-library/new-dtl?
This will help us understand and investigate this.

Here's an example that shows it's currently working:
https://stackblitz.com/edit/dtl-template-afwdcz?file=src%2Fmain.test.ts

[vincentaudebert]

Hi @MatanBobi

Thanks for your reply...
Sadly I can't manage to have a repro case working...

The best I managed to get is here: https://stackblitz.com/edit/dtl-template-5xjogm

We use our design system Ultraviolet and it seems it fails to work in stackblitz...

Could you communicate your guesses so I can check on my side inside our project and I'll post the solution here if I find something... ?

Thanks in advance.

[MatanBobi]

The template I've added is for DTL, if you need React, you can use https://testing-library.com/new-rtl.
Regarding my guesses, they really are guesses.
Can you try to see if you have multiple version of @testing-library/dom installed?
If you do, maybe using yarn resolutions or npm overrides may solve this issue. If not, which version of user-event + RTL versions are you using?

[vincentaudebert]

Same issue with RTL :(
https://stackblitz.com/edit/rtl-template-up3jy5
We might have an issue with our design system and these live coding tools

Only one version of testing-lib/dom
We found the issue with our CI (then reproduce locally) and it starts a new environment each time.

user-event is "14.5.2"
RTL is "14.3.0"

[MatanBobi]

RTL version 14 is using DTL version 9 and not 10. Are you sure you don't have multiple version installed? You can try and upgrade RTL to version 15 which uses DTL 10.

[vincentaudebert]

Thanks a lot @MatanBobi

We were still on RTL 14 and it was the issue. Works fine with RTL 15 and DTL 10.