search

testing-library / dom-testing-library

🐙 Simple and complete DOM testing utilities that encourage good testing practices.
https://testing-library.com/dom
MIT License
3.25k stars 460 forks source link

Test fails if not wrapped into waitFor #1301

Closed vincentaudebert closed 2 months ago

vincentaudebert commented 2 months ago

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: <input aria-checked="false" class="cache-p9zju0 e1wstm611" id=":r4:" name="sms" type="checkbox" value="" /> ❯ 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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Thanks a lot @MatanBobi

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