Is it possible to render a component at the bottom of viewport when testing in react testing library?

user_5465801 0
Viewed 41

I need to test how the select component behaves when it is positioned at the bottom of a page. When it is 1) at the top of the page - it opens dropdown to the bottom, and when it is 2) at the bottom of the page it opens dropdown to the top. I have no problem with testing its first behaviour, but I cannot test the second.

I tried to test it like this:

document.body.style.height = '500px'
const { container } = render(<Select {...requiredProps} />)
container.firstChild.style.position = 'fixed'
container.firstChild.style.bottom = '0'

fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))

But still I cannot simulate the proper behaviour.

I tried also below:

Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 })
render(<Select {...requiredProps} />)
fireEvent.scroll(window, { target: { scrollY: 500 } })
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))

And also below:

Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 })
render(<Select {...requiredProps} style={{ position: 'fixed', bottom: '0' }} />)
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%')

The problem is that to open dropdown at the top, I use getBoundingClientRect() on select, to find out how far it is from top and bottom. And in jest testing, getBoundingClientRect always returns 0 for each value - see https://github.com/jsdom/jsdom/pull/689

I try to manipulate container to give it top value of 480 but with no success.

react-testing-library reactjs
2 Answers
user_99934800

So the answer is, yes, it is possible. It is done simply by setting the height of window first:

Object.defineProperty(window, 'innerHeight', {
  writable: true, configurable: true, value: 500
})

And then by rendering the element using style property:

render(<Select {...requiredProps} style={{ position: 'fixed', bottom: 0 }} />)

I needed to position select in this way, in order to check if its items open to the top. The tests failed for me, because I calculated the condition using offsetHeight and `getBoundingClientRect() (I should have mentioned that in my question). So I needed to overwrite those values. My final test looks like this:

Object.defineProperty(window, 'innerHeight', {
  writable: true, configurable: true, value: 500
})
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
  configurable: true, value: 200
})

Element.prototype.getBoundingClientRect = jest.fn().mockReturnValueOnce({ top: 400 })

render(<Select {...requiredProps} style={{ position: 'fixed', bottom: 0 }} />)

fireEvent.click(screen.getByTestId('dropdown-container'))

expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))
user_54658010
Related