测试环境中PrimeReact VirtualScroller组件无法渲染内容求助

这不是PrimeReact的Bug，而是测试环境（如Jest+Testing Library）与真实浏览器的DOM行为差异导致的——VirtualScroller依赖容器尺寸和视口计算来渲染可见项，测试环境默认缺少这些触发条件。以下是具体解决方法：

• 模拟容器真实尺寸
  测试环境中的DOM元素默认没有实际宽高，VirtualScroller会因尺寸为0跳过渲染。可以手动设置容器的offset属性：

  import { render, screen, fireEvent } from '@testing-library/react';
  import 'resize-observer-polyfill'; // 若环境不支持ResizeObserver需引入
  import VirtualScroller from 'primereact/virtualscroller';
  
  test('VirtualScroller渲染条目', async () => {
    const cars = ["Ford"];
    const itemTemplate = (item) => <div>{item}</div>;
  
    render(<VirtualScroller items={cars} itemTemplate={itemTemplate} style={{ width: '200px', height: '200px' }} />);
  
    // 获取VirtualScroller内容容器
    const scrollerContent = screen.getByClassName('p-virtualscroller-content');
    // 模拟容器尺寸
    Object.defineProperty(scrollerContent, 'offsetHeight', { value: 200 });
    Object.defineProperty(scrollerContent, 'offsetWidth', { value: 200 });
  
    // 触发resize事件触发组件计算
    fireEvent(window, new Event('resize'));
  
    expect(await screen.findByText("Ford")).toBeInTheDocument();
  });
  

• 触发滚动事件激活渲染
  VirtualScroller可能需要滚动事件触发渲染逻辑，即使滚动位置为0：

  // 在设置尺寸后添加
  fireEvent.scroll(scrollerContent, { target: { scrollTop: 0 } });
  

• 确保等待异步初始化完成
  VirtualScroller的尺寸计算在useEffect中异步执行，使用findByText（内置等待）或waitFor确保等待组件完成初始化：

  await waitFor(() => {
    expect(screen.getByText("Ford")).toBeInTheDocument();
  });
  

内容的提问来源于stack exchange，提问作者David Churchland