如何组合两种React Testing Library屏幕查询方法？

你可以用以下两种更简洁的方式实现需求，同时完成所有验证：

方法一：用queryAllByRole配合find简化筛选 #

虽然你提到用find繁琐，但可以通过箭头函数简化写法，同时确保三个验证条件都被覆盖：

const myHeading = screen.queryAllByRole('heading', { level: 4 }).find(el => el.textContent === "my heading text");

这个写法会先获取所有层级为4的标题元素，再从中筛选出文本匹配的项，同时验证了：

• 元素是标题（role: 'heading'）
• 标题层级为H4（level: 4）
• 文本符合目标内容（textContent匹配）

方法二：直接用getByRole的name参数（最简便） #

React Testing Library的getByRole支持通过name选项匹配元素的可访问名称，对于标题元素来说，这个名称就是它的文本内容。直接用这个参数可以一步完成所有验证：

const myHeading = screen.getByRole('heading', { 
  level: 4, 
  name: "my heading text" 
});

这种方式不需要处理数组，一次查询就同时满足了三个验证要求，完全符合你的需求——既验证了标题角色和层级，又筛选出了指定文本的元素，比分开查询要简洁得多。

另外说明一下，你之前尝试的screen.getAllByRole(...).getByText()会报错，因为getAllByRole返回的是元素数组，数组本身没有getByText方法，所以这种写法不成立。

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