React Testing Library中的QuerySelectorAll是什么？

Question

问题: 我有多个下拉菜单，我想检查它们是否有任何一个是打开的。在React测试库中如何做到这一点？（我正在遍历一堆tabIndexes并逐个检查）

问题描述: 在React测试库中无法使用container.querySelectorAll。

代码:

it('should not expand dropdown for multiple view', () => {
    const { container } = render(
      getMockedComponent()
    )

    expect(container).toBeVisible()

    container
      .querySelector('div[tabindex]').forEach(eachAccordian => {
        expect(eachAccordian).toHaveAttribute('aria-expanded', 'false')
      })
 })

如何使用React测试库检查所有节点？

- TechnoCorner

---

嗨，有趣的是不确定这是否会引起兴趣 https://github.com/testing-library/react-testing-library/issues/526 - IronMan

谢谢。如果有其他选择，我们将不胜感激。 - TechnoCorner

getAllBy、queryAllBy、findAllBy...等，这些都是与编程有关的内容。你有很多选择，也可以安装测试库开发工具来帮助你找到正确的选择器... - Michael

Answer 1

你可以使用querySelectorAll代替querySelector来实现这一点。

container
      .querySelectorAll('div[tabindex]').forEach(eachAccordian => {
        expect(eachAccordian).toHaveAttribute('aria-expanded', 'false')
      })

- Konrad Gałęzowski

Answer 2

你可能想要使用React 测试库查询，而不是querySelector。使用queryAllBy 可以让你通过特定的data-test-id或role来选择任何东西，并从那里检查它们的属性！

- Cassidy

---

谢谢您的回复。您能给我一个例子吗？在这个例子中，我该如何使用 queryAllBy？ - TechnoCorner

比如说，你给下拉菜单设置了 data-test-id="dropdown"，那么你可以像这里的自定义查询助手一样（queryAllByTestId），来创建一个自定义查询助手：https://testing-library.com/docs/dom-testing-library/api-helpers#custom-queries - Cassidy

你可以使用以下代码获取所有带有 "myLabel" 标签的元素：const elements = queryAllByLabelText('myLabel') 然后，假设你想测试第一个元素是否是某个特定元素，你可以使用解构语法，例如：[ firstEl ] = elements 然后期望它具有某个特定的值... - Michael

Answer 3

看起来 "getByRole" 可以解决许多 querySelector 的需求。

角色：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles

- Damien Golding