如何获取testing-library中findAllBy*查询匹配的元素数量

findAllBy* 类查询本身就返回匹配到的所有DOM元素组成的Promise数组，直接读取数组的length属性就能拿到匹配总数，不需要额外找特殊封装的API，这也是官方文档没有单独列出计数方法的原因——本质就是普通JavaScript数组操作，完全可以直接配合你熟悉的toHaveLength断言使用。

针对你提到的表格新增行测试场景，直接参考下面的写法即可：

import { screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('点击新增按钮后表格正确追加1行数据', async () => {
  // 获取操作前的初始行数量，首屏异步加载的表格用findAllBy会自动等待加载完成
  const initialRows = await screen.findAllByRole('row')
  const initialRowCount = initialRows.length

  // 触发新增行的交互操作
  await userEvent.click(screen.getByRole('button', { name: '新增行' }))

  // 操作后重新查询所有行，findAllBy自带的重试等待机制会自动等新行渲染完成
  const updatedRows = await screen.findAllByRole('row')
  // 直接用熟悉的toHaveLength断言即可
  expect(updatedRows).toHaveLength(initialRowCount + 1)
})

几个实用注意点 #

• 涉及异步渲染的场景（比如新增行需要调接口、有过渡动画）必须用findAllBy*，不要用同步的getAllBy*，后者不会等待DOM更新，大概率会拿到更新前的元素数导致断言失败
• 要统计特定规则的元素数时，直接给findAllBy*传入对应匹配参数即可，比如要统计所有带“待审核”标签的行，直接写await screen.findAllByText('待审核')，返回数组的长度就是符合条件的元素总数
• 如果你习惯用waitFor写断言，也可以用更简洁的写法，不需要单独存额外变量：

  await waitFor(async () => {
    expect(await screen.findAllByRole('row')).toHaveLength(initialRowCount + 1)
  })
  

避坑提醒：不要缓存第一次查询拿到的元素数组等DOM更新后再读length，Testing Library的查询结果是查询时刻的DOM快照，DOM更新后之前缓存的数组不会自动同步最新状态，必须重新执行查询才能拿到最新的匹配结果。

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