6

我在这里进行了一项测试，我想验证在滚动浏览由react-window导入的列表组件后，正在呈现不同的项目。该列表位于一个表格组件内，该组件将滚动位置保存在 React 上下文中，这就是我需要测试整个表格组件的原因。

不幸的是，滚动事件似乎没有效果，列表仍然显示相同的项目。

测试看起来像这样：

render(
  <SomeProvider>
    <Table />
  </SomeProvider>
)

describe('Table', () => {
  it('scrolls and renders different items', () => {
    const table = screen.getByTestId('table')

    expect(table.textContent?.includes('item_A')).toBeTruthy() // --> true
    expect(table.textContent?.includes('item_Z')).toBeFalsy() // --> true

    // getting the list which is a child component of table
    const list = table.children[0]

    fireEvent.scroll(list, {target: {scrollY: 100}})

    expect(table.textContent?.includes('item_A')).toBeFalsy() // --> false
    expect(table.textContent?.includes('item_Z')).toBeTruthy() // --> false
  })
})

任何帮助将非常感激。

4

0 回答 0