Libraryを用いた単体テストの考え方/使い方はせがわ・2023/04/16に公開ツイートReactTestJesttestinglibrarytechはじめに最近、単体テストの考え方/使い方[1]を読む機会があり、その中で学んだAAAパターンが画期的だったので、共有したいと思います。BrunchMadeのホームページを例に、期待される動作や挙動に応じた単体テストの書き方を紹介します。上記は単体テストの考え方/使い方を読む前までの自分です。同じ状況にある方々が、本稿を通して少しでも役に立てることを願っています。AAAパターン私自身テストが書けるようになったのは良いものの、統一感のない記述方法に少し不安を覚えていました。その時に出会ったのがAAAパターンでした。AAAパターンとは、テストケースの構造に関するパターンのことです。Arrange:準備テストケースの事前条件を満たすためにテスト対象システム(オブジェクト)とその依存の状態を設定するフェーズ。Act:実行テスト対象システムのメソッドを呼び出すことで、テスト対象の振る舞いを実行するフェーズ。そのメソッドが戻り値を持つ場合は変数等で保持しておく必要がある。実行結果が想定した結果であることを確認するフェーズ。ここでいう実行結果とは、戻り値でもあればテスト対象システムやその協力者オブジェクトの実行後の状態。メソッドの呼び出されたことを対象とする。AAAパターンを用いることで、テストケースに対して簡潔かつ統一性の高い構造を持たせることができます。具体的なコードを見ていきましょう。});});!準備・実行・確認とコメントで区切っていますが、基本的に空白行で区切れば可読性に大きな影響はでません。実行フェーズの違い1️⃣は初期レンダリング時の挙動をテスト、2️⃣・3️⃣はカスタムフックが提供する関数をテストするため、実行フェーズが異なります。準備・実行フェーズの短縮化AAAをわかりやすくするために上記のような書き方をしていますが、1️⃣のようなシンプルなテストであれば準備と実行はまとめて記述しても良いと考えています。expect(result.current.isOpen).toBe(true);});コンポーネントの単体テスト問い合わせフォームのContactFormコンポーネントの単体テスト例です。ここでは、前述で紹介したuseDisclosureを使用して確認ダイアログが表示されるかどうかのテストを例に挙げていきます。);});責任:問い合わせフォームの入力と入力した内容の確認ダイアログを表示する!本来は入力やバリデーションチェックのロジックもありますが、ここで紹介するテスト内容とは関係ないため省略しています。});});setUp関数ダイアログの開閉を操作をする時には、「送信内容を確認する」ボタン要素を取得が必須になるため、setUp関数で共通化しました。準備フェーズはAAAパターンの中で最も大きくなるフェーズです。テストケース間で準備フェーズのコードが同じものを使用されるのであれば、共通化するのも可読性を高める1つの方法です。今回のケースはtesting-libraryの例を元に考えました。https://testing-library.com/docs/example-input-event他にもオブジェクト・マザーやテスト・データ・ビルダーと呼ばれるパターンもあります。AAAパターンのデザイン・アンチパターン🙆‍♂️デザインパターン基本的にArrangem→Act→Assertの順番が適切です。🙅‍♂️アンチパターン同じフェーズが複数あるケースは1度に多くのことを検証しようとしている可能性が高いです。基本的に単体テストの範囲は1単位の振る舞い[2]毎に分割して考えた方が可読性が高く、何をテストしているのかが明確になります。最後に最後までお読みいただきありがとうございました!単体テストの考え方/使い方はAAAパターン以外に単体テストの定義やモックのベストプラクティス、結合・E2Eなどのテスト手法も取り上げているのでオススメです📕また、今回はAAAパターンを紹介しましたが、似た様なパターンにGiven-When-Thenパターンがあります。より固定BrunchMade🌤️では一緒に働くメンバーを大募集しています!お問い合わせフォームからお気軽にご連絡ください。https://www.brunchmade.co.jpバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。フロントエンド多めバッジを贈るバッジを贈るとは?目次はじめにAAAパターンカスタムフックの単体テストコンポーネントの単体テストAAAパターンのデザイン・アンチパターン最後にZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。