Cant find button using Test Library (React)

Question

I'm must be missing something quite obvious, I have a react app that has a left div with multiple buttons, each one of them with different texts. I want to check if every one of those buttons was rendered.So for instance to find one of the buttons (using the Testing Library) I'm doing the following:

screen.getByText("/channels/i", { selector: "button" })

I Also tried

screen.getByRole("button", { name: /channels/i })

But I always get the result

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/channels/i`

    There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

But as you can see it does exist

Like that I have probably another 10 buttons, so I don't get why it says that there are no accessible roles.

What I'm doing wrong?

Answer 1

There are mainly 2 possibilities I see.

1. Not waiting for the button to appear. If your button is rendered after a certain thing has finished loading, you need to wait for it to appear on the screen. You can do that with a findBy query.

await screen.findByRole('button' { name: 'Channels' });

2. If your button is somehow not accessible--hidden by css for example--it won't be found by the getByRole query. You can verify this by passing the hidden prop. Note you should probably not be using hidden in most cases...

screen.getByRole('button' { name: 'Channels', hidden: true });

---

Useful links

• byRole
• findBy

Answer 2

In this particular case, it actually was a stupid mistake, I had my render() placed somewhat like this:

render(<App />)
describe("Navigation", () => {
        it("Navigation Test 1", () => {...

So basically because I'm using Testing Library before each iteration "it" would clean my App component making getByRole not able to find the nodes.

The moment I placed render() inside "it", all started working... Stupid mistake and with the code I provided it would be really hard to guess. Thanks anyway Doug.

Answer 3

This can also be caused by the name of the button being wrong. E.g.

screen.getByRole('button', { name: 'Sumbit' })

Note the typo: 'Sumbit' instead of 'Submit'. In this case, you get this very misleading error message:

Unable to find role="button"

I just lost half an hour on a simple typo and a bad error message. 🥲