React Testing LibraryのqueryByTextとgetByTextの違い

React Testing LibraryのqueryByTextとgetByTextの違いがわかっていなかったのでメモ。

queryByTextの場合は対象の文字列がなくてもエラーにはなりませんが、getByTextの場合は対象の文字列がなかった場合はエラーになります。

const Sample = () => {
  return <div>Sample</div>;
};

export default Sample;

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

describe("Sample", () => {
  it("queryByText", () => {
    render(<Sample />);

    expect(screen.queryByText("test")).not.toBeInTheDocument();
  });
  it("getByText", () => {
    render(<Sample />);

    expect(screen.getByText("test")).not.toBeInTheDocument();
  });
});

上記の2つのテストケースはどちらも文字列Sampleが見つからないためpassしそうですが、1つ目のケースはテストが通りましたが2つ目は下記エラーが発生しました。

TestingLibraryElementError: Unable to find an element with the text: test.
This could be because the text is broken up by multiple elements.
In this case, you can provide a function for your text matcher to make your matcher more flexible.