React Testing Library を使ってUIの結合テストをやってみる

大規模なWEBアプリにおいて影響範囲が広範囲に及ぶデータの変更などを行っていると、
人力でのテストはとても手間と時間がかかり、精度にも限界があります。

Testing Library は様々なフレームワークでのUIのテスト環境を提供しており、Reactを使ったWEBアプリのUIをテストすることも可能です。

例えば、フォームを入力し、入力したデータに応じて変化する別のUIの変更をテストするということも可能です。
fireEvent や userEvent といった操作でインタラクションを再現できるので、実際の人間による操作に近いテストを行うことができます。

今回は以前 Dexie.js を React で試してみたものを、Testing Library をつかってテストしてみました。

テストするUIは、
名前と電話番号を入力して、ADD ボタンをクリックすると、データが Dexie.js を通じて IndexedDB に保存され、
保存したデータがテーブルに一覧で表示されるというものです。

環境の準備

まずは、テストのためのライブラリをインストールします。

npm なら


npm i -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

1	npm i -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

yarn なら


yarn add --dev @testing-library/react @testing-library/user-event @testing-library/jest-dom

1	yarn add --dev @testing-library/react @testing-library/user-event @testing-library/jest-dom

テストを記述する


// テストに使うライブラリを import
import { render, screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";

// テストするコンポーネントを import
import App from "./App";

// テストの名前とテスト内容を定義
test("Add item and update table", async () => {

  // コンポーネントをレンダリング、コンポーネントのコンテナの要素を取得
  const { container } = render(<App />);

  // 名前と電話番号の入力フォーム、ADDボタンの要素を取得
  const nameInput = container.querySelector('[name="name"]');
  const telInput = container.querySelector('[name="tel"]');
  const addButton = screen.getByText(/add/i);

  // データを表示するテーブルの要素を取得
  const table = container.querySelector(".MuiTable-root");

  // テスト用のモックデータ（名前と電話番号）を準備
  const name = `Test Name ${Math.floor(Math.random() * 100)}`;
  const tel = String(Math.floor(Math.random() * 100000000000)).padStart(11, "0");

  // フォームに持っくデータを入力
  fireEvent.change(nameInput, { target: { value: name } });
  fireEvent.change(telInput, { target: { value: tel } });

  // ADD ボタンをクリック
  await userEvent.click(addButton);

  // テーブルに入力したモックデータがテーブルに追加されているか確認
  expect(await findByText(table, name)).toBeInTheDocument();
  expect(await findByText(table, tel)).toBeInTheDocument();
});

// テストに使うライブラリを import

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

import userEvent from "@testing-library/user-event";

import "@testing-library/jest-dom";

// テストするコンポーネントを import

import App from "./App";

// テストの名前とテスト内容を定義

test("Add item and update table", async () => {

// コンポーネントをレンダリング、コンポーネントのコンテナの要素を取得

const { container } = render(<App />);

// 名前と電話番号の入力フォーム、ADDボタンの要素を取得

const nameInput = container.querySelector('[name="name"]');

const telInput = container.querySelector('[name="tel"]');

const addButton = screen.getByText(/add/i);

// データを表示するテーブルの要素を取得

const table = container.querySelector(".MuiTable-root");

// テスト用のモックデータ（名前と電話番号）を準備

const name = `Test Name ${Math.floor(Math.random() * 100)}`;

const tel = String(Math.floor(Math.random() * 100000000000)).padStart(11, "0");

// フォームに持っくデータを入力

fireEvent.change(nameInput, { target: { value: name } });

fireEvent.change(telInput, { target: { value: tel } });

// ADD ボタンをクリック

await userEvent.click(addButton);

// テーブルに入力したモックデータがテーブルに追加されているか確認

expect(await findByText(table, name)).toBeInTheDocument();

expect(await findByText(table, tel)).toBeInTheDocument();

});

大まかな流れとしては、

render(<Component>) でコンポーネントをレンダリング
getBy や querySelector などで操作する要素を取得
fireEvent や userEvent で UI を操作
expect で結果をテスト

といった感じです。

作ってみたもの: Codesandbox
↑プレビューの Tests タブでテストを試すことができます。

以前 Selenium でテストの自動化をしてみたことがありましたが、Testing Library の方がより簡単な準備で簡単に記述できる印象でした。Seleniumと同じE2Eのテストフレームワークだと、最近は cypress というのも人気のようですね（参考: E2E テスト自動化ツールをざっと調べたまとめ – Qiita）。

Author Profile