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 ponent that can receive multiple children. This ponent 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 ponent with react-testing-library, the container of the ponent is rendered with a 0 height and width; so my ponent 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 ponentWidth = 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 ponent', () => {
  const { getAllByRole } = render(
    <ParentComponent>
      <Child />
      <Child />
      <Child />
    </ParentComponent>
  )

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

Updated:

Added this codesandbox example.

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 ponent that can receive multiple children. This ponent 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 ponent with react-testing-library, the container of the ponent is rendered with a 0 height and width; so my ponent 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 ponentWidth = 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 ponent', () => {
  const { getAllByRole } = render(
    <ParentComponent>
      <Child />
      <Child />
      <Child />
    </ParentComponent>
  )

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

Updated:

Added this codesandbox example.

• javascript
• reactjs
• jestjs
• jsdom
• react-testing-library

1 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./jsdom/jsdom/issues/135#issuement-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.