How to define container size for react-testing-library?

Question

I have looked into similar questions (like this one), but the proposed solutions didn't work for me when using react-testing-library.

I have a component that can receive multiple children. This component will then calculate its own size and its children size, to check how many children it will be able to render. It works fine when I use it in my application.

My problem is that, when rendering this component with react-testing-library, the container of the component is rendered with a 0 height and width; so my component will understand that there are no available space to render any child.

I tried to define a custom container inside the tests; tried to force some styling to set width and height; but none of that worked.

Is there a way to "fix" that?

Component (omitted some of the code for the purposes of this question):

const ParentComponent = (props) => {
  const [visibleChildren, setVisibleChildren] = useState(0)
  const myself = useRef(null)

  useEffect(() => {
    const componentWidth = myself.current.offsetWidth;
    const childrenWidth = myself.current.children.reduce(
      // Returns the total children width
    )

    // Returns the number of children I can display
    const childrenAmount = calculateSpace()
    setVisibleChildren(childrenAmount)
  }, [myself])

  // Slice the array of children to display only the right amount
  slicedChildren = props.children.slice(0, visibleChildren)

  return (
    <div ref={myself}>
      {slicedChildren}
    </div>
  )
}

Use:

<ParentComponent>
  <Child />
  <Child />
  <Child />
</ParentComponent>

Test:

import React from 'react'
import {render} from '@testing-library/react'
import ParentComponent from '../ParentComponent'

test('Render component', () => {
  const { getAllByRole } = render(
    <ParentComponent>
      <Child />
      <Child />
      <Child />
    </ParentComponent>
  )

  expect(getAllByRole("Child").length).toEqual(3)
})

Updated:

Added this codesandbox example.

Answer 1

We can mock that property right on HTMLElement.prototype:

Object.defineProperties(window.HTMLElement.prototype, {
  offsetWidth: {
    get: function() { return this.tagName === 'SPAN' ? 100: 500}
  }
});

kudos to https://github.com/jsdom/jsdom/issues/135#issuecomment-68191941

Take a look into issue, it has looooong story(since 2011!) but is still opened

Telling the truth, I see mocking offsetWidth for testing logic to be more reliable. I'd not expect from testing environment to calculate real styles(like offset sizes) all the way.