Reactjs 对getByRole、queryByRole等没有任何建议

执行查询时的建议，如

getByRole

，

queryByRole

等，对于理解和编写使用

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 

文档对此主题的理解非常肤浅：

添加

suggest:true

选项没有帮助

我正在使用以下版本：

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

.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 });
    });
});

import“@testinglibrary/jest-dom”；
从“@testing library/react”导入{screen，render，cleanup}”；
从“React”导入React；
从“react router dom”导入{HashRouter}；
从“../../components/elements/FAQ”导入常见问题；
描述（'FAQ'，（）=>{
它（'获取角色'，（）=>{
渲染(
)
getByRole（'button'，{suggest:true}）；
});
});

编辑

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;

const常见问题=（）=>{
返回(

恩维奥斯

//正文
{" "}
//正文


//正文


//李文

帕戈斯
//药典文本


贝宝：//text


{" "}
//text//text


{" "}
//文本Al
签出//文本

//正文

//正文

//正文



//正文


//正文

//文本

//正文

//文本

//正文


//正文


//正文

//正文

//正文


//正文
Regresar//查询的实际角色
);
};
导出默认常见问题；

错误是建议尝试使用

隐藏

选项而不是

建议

选项来定位用户可能看不到和/或无法访问的DOM元素

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

description（'FAQ'，（）=>{
它（'获取角色'，（）=>{
渲染(
);
getByRole（'button'，{hidden:true}）；
});
});

---

如果仍然无法找到/定位元素，那么我建议使用

testid

回退到您试图通过

getByTestId

查询的元素上，这也不起作用。我最终使用了

getByText

，我相信

getByTestId

是文档中最后的优先级之一。@FerToasted我怀疑您试图查询的内容实际上并没有隐藏，只是“难以”选择。是的，在返回到传统查询选择器之前，使用测试id应该是从react测试库使用的最后一个查询。你能用你要测试的组件代码更新你的问题吗？我假设它是

FAQ

组件？是的，我明白了，我只是不知道为什么当这个组件只是JSX时选择角色“很难”。没有状态，没有api调用，没有道具。这真的让人有点沮丧……你能为你要测试的组件添加代码吗？

按钮是自定义组件还是从库中导入的？尽管可能性不大，但它可能无法正确处理可访问性。您是否也可以共享该组件或通知我们它从何处导入？如果您在测试中调用
screen.debug（）
，您是否看到预期的DOM元素？是的，按钮来自
React bootstrap
。如果我
screen.debug（）
我确实看到了整个组件。那么可能是这样？
bootstrap
中的
按钮不适用于
getByRole
查询。
react bootstrap
中的按钮适用于
getByRole
。该错误表明您找不到任何可访问的角色，包括您在
FAQ
组件中的几个
标题。
describe('FAQ', () => {
  it('get roles', () => {
    render(
      <HashRouter>
        <FAQ />
      </HashRouter>
    );
    screen.getByRole('button', { hidden: true });
  });
});