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?
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.