[slider] Targeting the Thumb properly in a Jest/Vitest environment

[Powerplex]

Get help

Ask a question

Developers using our Base UI based design system were confused as to why in order to select a Slider.Thumb in a test, one must use { hidden: true }:

expect(screen.getByRole('slider', { hidden: true })).toBeInTheDocument()

I noticed these lines must be the cause: https://github.com/mui/base-ui/blob/master/packages/react/src/slider/thumb/SliderThumb.tsx#L251-L254

return {
      ['--position' as string]: `${positionPercent}%`,
      visibility:
        (renderBeforeHydration && !isMounted) || positionPercent === undefined
          ? 'hidden'
          : undefined,

I can't explain why this condition exists and if there is a way around this to keep our tests clean (and avoid using { hidden: true } ?

[linear]

BAS-374

[mj12albert]

@Powerplex Are you using thumbAlignment=edge? For that visibility is needed to prevent layout shift before the correct positions are calculated

However, screen.getByRole('slider') targets the (visually) hidden input element and not the thumb div, so I'm not sure why { hidden: true } works for you 🤔

are you trying to test various user actions on the thumb or something like that?

[Powerplex]

Yes, I am using thumbAlignment="edge" and replacing it with center fixes it. But now I understand why you apply visibility: hidden first.

Developers are mostly testing the presence of the slider with it's correct accessible name, like:

expect(screen.findByRole('slider', { name: 'The accessible name I want to cover with my test', hidden: true }))

Or sometimes to play with it:

screen.getByRole('slider', { hidden: true }).focus()
await user.keyboard('{ArrowRight}')

For the rest, are you saying I should target the thumb div for testing and not the slider role element ?