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つのテストケースはどちらも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.

「〇〇が表示されないこと」みたいなテストケースを書くときはqueryByTextを使用する方がよさそうです。