I have a react component that behaves like a slider. I wanna test if one of the elements that is hidden by the overflow is visible or not.

What I have so far is

const prevBtn = screen.getByRole('button', { name: /prev slide/i })
const juneTwentySix = await screen.findByTestId('Sun 26 Jun')
const juneThird = await screen.findByTestId('Sun 30 Jun')

expect(prevBtn).toBeDisabled()
expect(juneTwentySix).toBeVisible() <-- ok
expect(juneThird).toBeInTheDocument() <-- it's in the DOM, so it's ok to be in the document
expect(juneThird).not.toBeVisible() <-- this is where I want to check if the element is visible or not.

How is this slider built: The parent component has a fixed width: ie 300px, and what makes the child component (the one that contains the dates) is transform: translateX(-${currentSlide * 100}%)