react-virtualized - 是否可以通过airbnb/ enzyme 进行 react 虚拟化？

Question

是否可以同时使用 react 虚拟化和 enzyme ？当我尝试一起使用它们时，似乎在网格中得到了一个空项目列表。

Answer 1

2应该一起工作，是的。我相信可能的问题是，将响应虚拟化组件的宽度或高度设置为0，这将使其不呈现任何内容。 (它仅渲染足以填充其具有的“窗口”。)

假设您使用的是AutoSizer HOC(大多数人都在这样做)，那么我发现一种有用的模式是导出两种版本的组件-一种期望显式的width/height属性，而另一种则用AutoSizer包裹另一种。伪代码为:

import { AutoSizer, VirtualScroll } from 'react-virtualized'

// Use this component for testing purposes so you can explicitly set width/height
export function MyComponent ({
  height,
  width,
  ...otherProps
}) {
  return (
    <VirtualScroll
      height={height}
      width={width}
      {...otherProps}
    />
  )
}

// Use this component in your browser where auto-sizing behavior is desired
export default function MyAutoSizedComponent (props) {
  return (
    <AutoSizer>
      ({ height, width }) => (
        <MyComponent
          height={height}
          width={width}
          {...props}
        />
      )
    </AutoSizer>
  )
}