React 测试库 getByLabelText 不连接多部分 aria-labelledby

Question

按照 this MDN article，我有一个由三个不同元素组合标记的复选框输入：一个标签、一个文本字段，然后是另一个标签。

所以复选框输入有一个 aria-labelledby 属性，其值类似于 label1 text-field label2.

<input type="checkbox" aria-labelledby="allow-up-to num words-in-between" />
<div>
  <label id="allow-up-to">allow up to</label>
  <input id="num" type="text" value="0" />
  <label id="words-in-between">words in between</label>
</div>

在我的测试中，我试图根据该标签获取复选框。

我可以使用 getByLabelText('text of label1') 或 getByLabelText('text of label2') 成功获取输入，但是给它完整的、串联的标签 getByLabelText('text of label1 value of text-field text of label2') 结果什么也找不到。

getByLabelText("allow up to"); // works
getByLabelText("words in between") // works
getByLabelText("allow up to 0 words in between") // does not work

尝试 getByLabelText('value of text-field') 也不起作用，但即使我从 aria-labelledby 中删除文本字段，我仍然无法使用 getByLabelText('text of label1 text of label2') 获取输入。 Here's a codesandbox 实际的简化版本 UI 我正在尝试测试。

getByLabelText 是否应该以这种方式工作（即使根据 MDN 文章 aria-labelledby 中的多个标签应该由屏幕 reader 连接起来）？如果是这样，是否有另一种方法可以通过完整的标签文本获取输入？

Answer 1

我能够让它与 getByRole 查询一起使用。

test('gets by complete label', () => {
  const { getByRole } = render(<AllowedWordsBetween />);
  const checkbox = getByRole('checkbox', {
    name: 'allow up to 0 words in between',
  });
  expect(checkbox).toBeInTheDocument();
});

这可能是 getByLabelText 查询的问题，但我还不确定。

---

编辑 2020 年 11 月

问题 was fixed 并包含在版本 7.21.2

中