如何在React中全面测试带API处理与虚拟滚动的PrimeReact AutoComplete组件？

• 核心功能：支持按姓名、手机号等不同条件搜索客户，搜索建议通过API接口动态获取
• 组件关键配置：
  • 动态绑定searchCriteria，同步设置搜索字段与输入框占位提示
  • 通过completeMethod触发搜索请求，获取并更新suggestions列表
  • 配置onSelect处理客户选择逻辑，onClear处理搜索框清空操作
  • 使用自定义itemTemplate渲染客户信息项，搭配虚拟滚动优化大量数据的展示性能
• 测试方案：采用Jest + React Testing Library开展组件测试

简化实现代码 #

<AutoComplete
  placeholder={`Search Customer By ${searchCriteria}`}
  inputClassName='customer-search-bar__autocomplete w-full'
  className='w-5'
  field={searchCriteria}
  value={searchValue}
  suggestions={suggestions}
  itemTemplate={(item) => <CustomerInfo {...item} />}
  virtualScrollerOptions={{ itemSize: 100 }}
  completeMethod={onSearch}
  onSelect={onCustomerSelect}
  onClear={onClear}
/>

内容的提问来源于stack exchange，提问作者Bhushan Patil