@testing-library/reactから提供されるエクスポート

はじめに

今回はテストでよく使用されるrender,screenなどのエクスポート関数の使い方について簡単に説明します。

インストール方法

下記を参照していただければと思います。

renderとscreen

下記はAppコンポーネントを仮想DOMに作画しております。renderすることによりテスト用として使用することができます。

screenはDOMを操作・検索するためのものです。例ではscreen.getByText("Hello World"))とし、DOMの中から「Hello World」というテキストを探しております。そのあとはマッチャ―を使用し文字列がDOMに存在するかをテストしています。

import { render, screen } from "@testing-library/react";
import App from "./App";

test("App コンポーネントが描画される", () => {
  render(<App />);
  expect(screen.getByText("Hello World")).toBeInTheDocument();
});

fireEvent

fireEventはクリック、入力、フォーカスなどを仮想DOM上で発火させることができます。

クリックすることで{handleClick}を呼ぶように設定　→　その後fireEvent.clickを使用しクリックイベントを発火　→　toHaveBeenCalledTimes(1)を使用しモック関数が一回呼ばれたかどうかをテストし成功すれば通過、呼ばれていなければ失敗。

import { fireEvent } from "@testing-library/react";

test("ボタンをクリックするとイベント発火", () => {
  const handleClick = jest.fn();
  render(<button onClick={handleClick}>クリック</button>);

  fireEvent.click(screen.getByText("クリック"));

  expect(handleClick).toHaveBeenCalledTimes(1);
});

waitFor

こちらは任意の条件が成立するまで繰り返しチャックする関数になります。

import { waitFor } from "@testing-library/react";

test("非同期処理の結果を待つ", async () => {
  render(<div>{/* 後で"完了"が表示される */}</div>);

  // 例: setTimeout や API レスポンスを想定
  await waitFor(() => expect(screen.getByText("完了")).toBeInTheDocument());
});

waitForElementToBeRemoved

こちらは要素が消えるまで待ってからテストをする関数になります。

import { waitForElementToBeRemoved } from "@testing-library/react";

test("ローディングが消えるまで待つ", async () => {
  render(<div>読み込み中...</div>);

  await waitForElementToBeRemoved(() => screen.getByText("読み込み中..."));
});

within

特定の要素の中だけで検索することができます。
data-testidを設定しmenuという名前を付ける　→　TestIDのみをscreenで取得　→　expectでmenuのみを取得し、toBeInTheDocument()で値があるかどうかの確認をしています。

import { within } from "@testing-library/react";

test("特定のセクション内で要素を探す", () => {
  render(
    <div data-testid="menu">
      <span>アイテム1</span>
      <span>アイテム2</span>
    </div>
  );

  const menu = screen.getByTestId("menu");
  expect(within(menu).getByText("アイテム1")).toBeInTheDocument();
});

おわりに

私が今回テストで主に使用したものを例でまとめてみました。自分自身まだ見ながら書いたりすることが多いのでもう少し慣れていきたいです。

ISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！