メインコンテンツにスキップ

イントロダクション

@testing-library パッケージファミリーは、ユーザー中心の UI コンポーネントテストを支援します。

テストがソフトウェアの使用方法に似ていれば似ているほど、テストの信頼性は高まります。

問題点

コンポーネントがユーザーにとって機能しているという高い確信を与えてくれる、保守性の高いテストを作成したいと考えています。この目標の一環として、テストに実装の詳細を含めないようにすることで、コンポーネントのリファクタリング(機能ではなく実装の変更)によってテストが中断され、チームの作業が遅延するのを防ぎたいと考えています。

解決策

コアライブラリである DOM テスティングライブラリ は、JSDOM/Jest でシミュレートされているか、ブラウザ内かに関わらず、DOM ノードをクエリして操作することで Web ページをテストするための軽量ソリューションです。提供される主なユーティリティには、ユーザーがページ上で要素を見つける方法と同様の方法で DOM をクエリしてノードを取得することが含まれます。このように、このライブラリは、実際のユーザーがアプリケーションを使用する際にアプリケーションが機能するという確信をテストから得られるようにします。

コアライブラリは、ReactAngularVue など、いくつかのフレームワークに人間工学に基づいた API を提供するためにラップされています。Cypress でエンドツーエンドテストを行うための testing-library クエリを使用するプラグインや、React Native の実装もあります。

このライブラリではないもの

  1. テストランナーまたはフレームワーク
  2. 特定のテストフレームワーク専用

DOM テスティングライブラリ は、Jest、Mocha + JSDOM、実際のブラウザなど、DOM API を提供するあらゆる環境で動作します。

Testing Library で避けるべきこと

Testing Library は、テスト対象のコンポーネントの内部構造 (実装の詳細) のようなテストを避けることを推奨しています(それでも可能です)。このライブラリの基本原則 は、Web ページがユーザーによってどのように操作されるかを厳密に模倣したテストに焦点を当てることを重視しています。

以下の実装詳細は避けるべきです

  1. コンポーネントの内部状態
  2. コンポーネントの内部メソッド
  3. コンポーネントのライフサイクルメソッド
  4. 子コンポーネント