Answer a 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?

Answers

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.