我在使用推荐的byRole进行查询时遇到了挑战。我使用screen.debug（）确认要查询的节点位于DOM中。aria-labelledby值作为prop传递给react组件，然后作为属性值设置为底层按钮元素。
await screen.findAllByRole('button', { name: /Kärpät/i }); // [node]
await screen.findAllByRole('button', { name: /Syväkankaan Kioski/i }) // Unable to find role="button" and name "Syväkankaan Kioski"我设法使用findAllByTestId解决了这个问题，但是我更喜欢使用角色，并且想了解发生了什么。不知何故，空格导致匹配器失败！？screen.debug(await screen.findAllByRole('button'));日志输出：
console.log
<button
aria-label="Lopeta seuraaminen"
aria-labelledby="Kärpät"
class="follow-keyword-toggle-button follow-keyword-toggle-button--active"
data-testid="follow-button-1477"
type="button"
>
<i
class="fas fa-heart"
/>
</button>
console.log
<button
aria-label="Lopeta seuraaminen"
aria-labelledby="Syväkankaan Kioski"
class="follow-keyword-toggle-button follow-keyword-toggle-button--active"
data-testid="follow-button-111"
type="button"
>
<i
class="fas fa-heart"
/>
</button>PS我正在实现一个设计，所以不要判断使用按钮没有文字：）
1条答案
按热度按时间lvmkulzt1#
看起来您正在将可选的“accessible name”参数传递给
findAllByRole，但是您必须了解如何生成可访问名称以传递正确的值。对于辅助性名称的来源，有一个优先级列表。在您的代码示例中，您指定了两个辅助性名称：
aria-label和aria-labelledby。将只使用其中一个。aria-labelledby的优先级高于aria-label，因此将忽略aria-label。请参阅上述URL中的步骤2B（aria-labelledby）和2C（aria-label）。还要注意
aria-labelledby应该是DOM中其他元素的ID或ID列表。如果“Kärpät”是另一个元素的ID，或者“Kärpät”是实际的标签（文本文字），如果是后者，那么你没有正确使用它。
类似于：
aria-labelledby可以是一个ID列表，所以如果你的代码中有两个DOM元素，一个是id="Syväkankaan"，一个是id="Kioski"，那么你就正确地使用了它，但是如果你期望“Syväkankaan Kioski”作为标签，那么你就没有正确地使用它。从调用
findAllByRole的方式来看，您似乎认为aria-labelledby是一个文本字符串，这是不正确的。