如何在React Testing Library中按元素类型查找HTML元素

按HTML标签查询元素的实现方案 #

首先注意你示例中的findByElement不是React Testing Library的内置API，RTL中find前缀的查询均为异步方法，返回Promise，使用时需要添加await关键字。

React Testing Library 优先推荐面向用户感知的查询方式（如role、label文本、占位符等），但确实支持自定义查询场景，你要统计div元素数量可以用两种方案：

1. 直接使用原生DOM API查询
   从render方法返回的container就是渲染组件的根DOM节点，你可以直接调用原生DOM查询方法，和你在浏览器里操作DOM的逻辑完全一致：

import { render } from '@testing-library/react';

test('统计页面div数量', () => {
  const { container } = render(<YourComponent />);
  // 查询所有div元素
  const allDivs = container.querySelectorAll('div');
  expect(allDivs).toHaveLength(5);
})

如果是查询异步渲染的元素，需要搭配waitFor等待元素渲染完成：

import { render, waitFor } from '@testing-library/react';

test('统计异步渲染的div数量', async () => {
  const { container } = render(<YourAsyncComponent />);
  await waitFor(() => {
    expect(container.querySelectorAll('div')).toHaveLength(5);
  })
})

2. 使用RTL内置的role查询
   没有显式设置role属性的div默认ARIA角色为generic，你也可以用getAllByRole查询：

import { render, screen } from '@testing-library/react';

test('统计页面div数量', () => {
  render(<YourComponent />);
  // 仅能匹配没有自定义role属性的div
  const allDivs = screen.getAllByRole('generic');
  expect(allDivs).toHaveLength(5);
})

注意这种方式无法匹配设置了自定义role的div元素，适用范围比原生DOM查询窄。

screen模块的使用说明 #

screen不是必须使用的容器。
screen只是RTL提供的便捷查询工具，默认绑定了全局的document.body作为查询根节点，所有screen提供的查询方法，都可以通过render返回的查询对象、或者within方法绑定的自定义容器实现：

• 如果你需要全局查询整个渲染内容，直接用screen更简便
• 如果你需要限定查询范围在某个子DOM节点内，可以用within生成绑定该节点的查询对象：

import { render, screen, within } from '@testing-library/react';

test('查询指定区域内的div', () => {
  render(<YourComponent />);
  // 先找到指定的section节点
  const userSection = screen.getByRole('region', { name: '用户信息区' });
  // 仅查询该section下的div
  const sectionDivs = within(userSection).getAllByRole('generic');
  // 或直接用原生方法查询
  // const sectionDivs = userSection.querySelectorAll('div');
  expect(sectionDivs).toHaveLength(3);
})

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