reactjscreate-react-appreact-testing-library

Cant find button using Test Library (React)


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

enter image description here

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?


Solution

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