越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

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

テクニック

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 なら

yarn なら

テストを記述する

大まかな流れとしては、

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

といった感じです。

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

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

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。