QuerySelectorAll in React Testing Library?

Question

Question: I have multiple dropdowns and I am checking to see if any of them are open. How can i do this in React testing library? (I'm going through bunch of tabIndexes and checking through them)

Issue: container.querySelectorAll isn't possible in react testing library.

Code:

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')
      })
 })

How can i check all the nodes using React testing library?

Hi, interesting not sure if this might be of interest github.com/testing-library/react-testing-library/issues/526 — IronMan
– IronMan, Commented Sep 24, 2020 at 0:01
getAllBy, queryAllBy, findAllBy... testing-library.com/docs/dom-testing-library/cheatsheet/… You have many options, you can also install the testing library dev tools to help you find the correct selectors... — Michael
– Michael, Commented Mar 21, 2021 at 12:16

Konrad Gałęzowski · Accepted Answer · 2021-07-23 11:25:12Z

11

You can do this by using querySelectorAll instead of querySelector.

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

answered Jul 23, 2021 at 11:25

Konrad Gałęzowski

2,0221 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cassidy · Accepted Answer · 2020-09-24 00:05:54Z

4

You might want to use the React Testing Library queries instead of querySelector. queryAllBy should probably get you what you need, where you can select anything with a certain data-test-id or role, and check their attributes from there!

answered Sep 24, 2020 at 0:05

Cassidy

3,3635 gold badges41 silver badges81 bronze badges

3 Comments

TechnoCorner Over a year ago

Thank you for your response. Can you give me an example? How can i use queryAllBy in this example?

Cassidy Over a year ago

Like let's say that you give your dropdowns a data-test-id="dropdown", then you can make a custom query helper like the one here (the queryAllByTestId): testing-library.com/docs/dom-testing-library/…

Michael Over a year ago

you can get all : const elements = queryAllByLabelText('myLabel') then lets say you wanna test the if the first one is a certain element, you can use destructering for example: [ firstEl ] = elements then expect it to have a certain value...

Damien Golding · Accepted Answer · 2022-11-11 01:32:03Z

0

It seems "getByRole" solves many querySelector requirements.

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

answered Nov 11, 2022 at 1:32

Damien Golding

9764 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

QuerySelectorAll in React Testing Library?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related