Как определить размер контейнера для реагирующей-тестирующей библиотеки?

Question

Я рассматривал похожие вопросы (например, , этот ), но предложенные решения не помогли мне при использовании реагировать-тестирование-библиотека .

* 1006. * У меня есть компонент, который может принимать несколько детей. Затем этот компонент вычислит свой собственный размер и размер дочерних элементов, чтобы проверить, сколько дочерних элементов он сможет отобразить. Он отлично работает, когда я использую его в своем приложении.

Моя проблема в том, что при рендеринге этого компонента с response-testing-library контейнер компонента отображается с 0 height и width;поэтому мой компонент поймет, что нет доступного пространства для рендеринга любого потомка.

Я попытался определить пользовательский контейнер внутри тестов;попытался заставить некоторые стили установить width и height;но ничего из этого не сработало.

Есть ли способ "исправить" это?

Компонент (для целей этого вопроса пропущен некоторый код):

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>
  )
}

Использование:

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

Тест:

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)
})

Обновлено:

Добавлено это codesandbox пример.

Answer 1

Если ParentComponent наследует высоту от своего родителя, то вы можете просто обернуть его внутри div с указанными шириной и высотой для вашего теста.

т.е.:

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)
})