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 中的多个标签应该由屏幕阅读器连接）？如果是这样，是否有另一种方法可以通过完整标签文本获取输入？

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中