React Testing Library 基本コマンド集

React Testing Libraryを使用する際の基本的な操作について、具体的な例と共にまとめていきます。

getByText

指定されたテキストコンテンツを持つ要素を取得します。任意の要素をテキストコンテンツによって見つけるために使用されます。

render(<button>Submit</button>);

const button = screen.getByText("Submit");
expect(button).toBeInTheDocument();

getByLabelText

指定されたラベルテキストに対応する要素（通常はフォーム要素）を取得します。

render(
  <div>
    <label htmlFor="username">Username</label>
    <input id="username" />
  </div>
);

const input = screen.getByLabelText("Username");
expect(input).toBeInTheDocument();

getByRole

指定されたロール（役割）を持つ要素を取得します。アクセシビリティ属性に基づいて要素を検索するために使用されます。

render(<button>Submit</button>);

const button = screen.getByRole("button", { name: "Submit" });
expect(button).toBeInTheDocument();

getByTestId

指定された data-testid 属性を持つ要素を取得します。特定のテスト対象要素を簡単に見つけるために使用されます。

render(<button data-testid="submit-button">Submit</button>);

const button = screen.getByTestId("submit-button");
expect(button).toBeInTheDocument();