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

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.

Answers:

Answer

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.

Answer

If the ParentComponent is inheriting height from it's parent then you should be able to just wrap it inside of a div with specified width and height for your test.

ie:

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

test('Render component', () => {
  const { getAllByRole } = render(
    <div style={{ width: 500, height: 500 }}>
      <ParentComponent>
        <Child />
        <Child />
        <Child />
      </ParentComponent>
    </div>
  )

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.