如何为 react-testing-library 定义容器大小？

Question

我调查过类似的问题（比如 ), but the proposed solutions didn't work for me when using react-testing-library。

我有一个组件可以接收多个 children。然后该组件将计算自己的大小及其 children 大小，以检查它能够渲染多少 children。当我在我的应用程序中使用它时它工作正常。

我的问题是，当用 react-testing-library 渲染这个组件时，组件的容器用 0 height 和 width 渲染；所以我的组件会明白没有可用的 space 来呈现任何 child.

我试图在测试中定义一个 custom container；试图强制设置一些样式来设置 width 和 height；但是 none 有效。

有办法"fix"吗？

组件（为了本题省略部分代码）：

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

我们可以在 HTMLElement.prototype 上嘲笑属性:

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

感谢https://github.com/jsdom/jsdom/issues/135#issuecomment-68191941

查看 issue，它有很长的故事（自 2011 年以来！）但仍处于打开状态

说实话，我看到嘲笑 offsetWidth 测试逻辑更可靠。我没想到测试环境会一直计算真实样式（如偏移大小）。

如何为 react-testing-library 定义容器大小？

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

javascript

reactjs

jestjs

jsdom

react-testing-library

组件（为了本题省略部分代码）：

使用：

测试：

已更新：