时间戳

首页 > 解决方案 > 段落的 getByRole 查询在 React 测试期间不起作用

reactjs - 段落的 getByRole 查询在 React 测试期间不起作用

问题描述

我创建了一个简单的计数器应用程序来学习react testing library。但是当我测试一个段落是否用{count}文本呈现时，我被卡住了。

主要的.jsx

function Main() {
  const [Count, setCount] = useState(0);

  function handleCount() {
    setCount((c) => c + 1);
  }
  return (
    <div>
      <h1>Counter App</h1>
      <Counter count={Count} />
      <Button label="Click me" handleCount={handleCount} />
    </div>
  );
}

计数器.jsx

function Counter({ count }) {
  return <p>{count}</p>;
}

主规范.jsx

it("should render count", () => {
    render(<Main />);
    expect(screen.getByRole("paragraph")).toBeInTheDocument();
});

这个测试还不足以通过。我知道我们可以添加data-testid到<p>DOM 节点，然后我们可以通过getByTestId查询来测试它。但我想知道为什么我上面使用的测试用例getByRole('paragraph')每次都失败。

标签： reactjsreact-testing-library

解决方案

getByRole使用不同元素的 HTML 角色。段落不是一个有效的角色，这就是您的查询不起作用的原因。您可以在此处阅读有关getByRole https://testing-library.com/docs/dom-testing-library/api-queries/#byrole以及 html 中不同角色的更多信息：https ://www.w3.org/TR /html-aria/#docconformance。

例如，您可以使用getByText来实现您想要的（在此处阅读有关首选查询的更多信息：https ://testing-library.com/docs/guide-which-query/ ）。

expect(screen.getByText("0")).toBeInTheDocument();

推荐阅读