title: How to define container size for react-testing-library?
body: <p>I have looked into similar questions (like <a href="https://stackoverflow.com/questions/33325893/how-to-set-the-width-of-a-react-component-during-test/39671492">this one</a>), but the proposed solutions didn't work for me when using <a href="https://github.com/testing-library/react-testing-library" rel="noreferrer">react-testing-library</a>.</p>
  
  <p>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.</p>
  
  <p>My problem is that, when rendering this component with <a href="https://github.com/testing-library/react-testing-library" rel="noreferrer">react-testing-library</a>, the container of the component is rendered with a 0 <code>height</code> and <code>width</code>; so my component will understand that there are no available space to render any child.</p>
  
  <p>I tried to define a <a href="https://testing-library.com/docs/react-testing-library/api#container" rel="noreferrer">custom container</a> inside the tests; tried to force some styling to set <code>width</code> and <code>height</code>; but none of that worked.</p>
  
  <p>Is there a way to "fix" that?</p>
  
  <h3>Component (omitted some of the code for the purposes of this question):</h3>
  
  <pre><code>const ParentComponent = (props) =&gt; {
    const [visibleChildren, setVisibleChildren] = useState(0)
    const myself = useRef(null)
  
    useEffect(() =&gt; {
      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 (
      &lt;div ref={myself}&gt;
        {slicedChildren}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <h3>Use:</h3>
  
  <pre><code>&lt;ParentComponent&gt;
    &lt;Child /&gt;
    &lt;Child /&gt;
    &lt;Child /&gt;
  &lt;/ParentComponent&gt;
  </code></pre>
  
  <h3>Test:</h3>
  
  <pre><code>import React from 'react'
  import {render} from '@testing-library/react'
  import ParentComponent from '../ParentComponent'
  
  test('Render component', () =&gt; {
    const { getAllByRole } = render(
      &lt;ParentComponent&gt;
        &lt;Child /&gt;
        &lt;Child /&gt;
        &lt;Child /&gt;
      &lt;/ParentComponent&gt;
    )
  
    expect(getAllByRole("Child").length).toEqual(3)
  })
  </code></pre>
  
  <h2>Updated:</h2>
  
  <p>Added this <a href="https://codesandbox.io/s/aged-sun-tullt" rel="noreferrer">codesandbox</a> example.</p>