No suggestions on getByRole, queryByRole, etc

Question

Suggestions when performing queries such as getByRole, queryByRole, etc. have been very usefull to understand and write more assertive tests with testing-library/react.

     TestingLibraryElementError: Unable to find an accessible element with the role "button"
    
        Here are the accessible roles:
        
          heading:
        
          Name "Testing Library Recipes":
          <h1 />
... // more 

However, I'm trying to dump these suggestions in a different project and the only thing I'm getting is this message:

 TestingLibraryElementError: Unable to find an accessible element with the role "button"

    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

Docs are very shallow about this topic: https://testing-library.com/docs/dom-testing-library/api-configuration/#throwsuggestions-experimental

Adding the suggest: true option won't help.

I'm using the following versions:

"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "^11.2.5",

The .test:

import "@testing-library/jest-dom";
import { screen, render, cleanup } from "@testing-library/react";

import React from "react";
import { HashRouter } from "react-router-dom";
import FAQ from "../../components/elements/FAQ";

describe('FAQ', () => {
    it('get roles', () => {
        render(<HashRouter>
            <FAQ />
        </HashRouter>)
        screen.getByRole('button', { suggest: true });
    });
});

EDIT

const FAQ = () => {
    return (
        <div style={{ marginTop: "13%" }}>
            <ul id="about-ul">
                <h3 className="mt-4">Envíos</h3>
                <li>
                    //text
                    <FontAwesomeIcon icon={faShippingFast} color={"orange"} />{" "}
                    // text
                </li>
                <li>
                    // text
                </li>
                <li>
                    // li text
                </li>
                <h3 className="mt-4">Pagos</h3>
                <p>// pharagraph text </p>
                <li>
                    <FontAwesomeIcon icon={faPaypal} color={"blue"} /> &nbsp;
                    <b>PayPal:</b> // text
                </li>
                <li>
                    <FontAwesomeIcon
                        icon={faMoneyBillWaveAlt}
                        color={"green"}
                    />{" "}
                    &nbsp;
                    <b> // text </b> // text
                </li>
                <li>
                    <FontAwesomeIcon icon={faExchangeAlt} color={"red"} />{" "}
                    &nbsp;
                    <b>// text</b> Al
                    <em>checkout</em> // text
                </li>
                <h3 className="mt-4">// text</h3>
                <li>
                    <FontAwesomeIcon icon={faPercentage} color={"red"} />
                    // text
                </li>
                    <h4 className="mt-5">// text</h4>
            </ul>

            <div className="container" id="faq-list-container">
                <ul>
                    <p id="faq-list-el">
                        <b>// text</b>
                    </p>
                    <li>
                        // text
                    </li>
                    <b>
                        <p id="faq-list-el">// text</p>
                    </b>
                    <li>
                        // text
                    </li>
                    <b>
                        <p id="faq-list-el"> // text</p>
                    </b>
                    <li>
                        // text
                    </li>
                    <b>
                        <p id="faq-list-el">
                            // text
                        </p>
                    </b>
                    <li>
                       // text
                    </li>
                    <b>
                        // text
                    </b>
                    <li>
                        // text
                    </li>
                </ul>

                <h5 className="mt-4 mb-3">
                    // text
                </h5>

                <Link to="/" id="back-btn">
                    <Button variant={"primary"}>Regresar</Button> // actual Role of the query
                </Link>
            </div>
        </div>
    );
};

export default FAQ;

Answer 1

The error is suggesting to try using the hidden option, not the suggest option, to locate a DOM element that may not be visible and/or accessible to a user.

describe('FAQ', () => {
  it('get roles', () => {
    render(
      <HashRouter>
        <FAQ />
      </HashRouter>
    );
    screen.getByRole('button', { hidden: true });
  });
});

If this still fails to find/locate an element then I suggest using a testid fallback on the element you are trying to target and query by getByTestId.