Reactのユニットテストを記述する際に出てくるメソッド
Jest等をつかってReactのユニットテストを実装しようと色々調べると、Reactの公式サイトやQiitaなどの参考文献ではact()という引数にコールバックを持つメソッドを使っています。
大抵の場合はコールバック内にrenderメソッド(コンポーネントをレンダリングするメソッド)が記述されていることが多いですが、他の処理も書かれていることがあります。act()が何なのか、コールバックには何を記述すればいいのかを具体的に調べてみました。
act()ヘルパーとは？
react-dom/test-utilsが提供しているユニットテストを記述する際にArrange-Act-Assert パターンにおけるActの実行処理を確実にコンポーネントに反映させるためのヘルパーです。
Arrange-Act-Assert とは？
単体テストの記述でよく用いられる有名なパターンです。(通称AAA) テストコードをArrange(準備)、Act(実行)、Assert(検証)の3パートに分けて記述していきます。Arrangeでは必要な変数の用意や設定を行い環境を作り、Actでユニットに影響を及ぼす処理を記述し反映させ、Assertで想定通りの挙動になっているかをチェックします。act()ヘルパーはこのActの部分の処理をコールバックに記述していきます。
どうしてact()ヘルパーを使用するのか？
Arrange-Act-Assert パターンに沿っているなら、わざわざact()ヘルパーを使用しなくてもよさそうに思えそうですが、実際のActの処理には大抵非同期の処理や再レンダリングが発生します。もし、実行した内容が反映される前に検証を始めてしまうと、想定とは違う状態のDOMを検証してしまう可能性があります。それを防ぐためにact()ヘルパーを使用します。このヘルパーは、コールバック引数内に書かれた処理が影響を及ぼす範囲が全て反映されてからAssertパートに移行することが出来ます。これによってユニットテストを想定した通りのレンダリング内容で確実に検証することができます。
まとめ：act()ヘルパーは毎回使った方が良い？
act()ヘルパーを書かなくてもテストコードが機能することもあるので、わざわざ毎回act()ヘルパーでラップするのはボイラープレートコード(毎回書くお約束のコード)っぽく感じますが、CI/CDなどで自動テストを何度も行う際、サーバの状況に限らず常に正しい結果を保証できるユニットテストを記述しなければ、プログラムのクオリティに影響を及ぼしてしまいます。毎度テストを記述する際に非同期処理が含まれるか？レンダリングが遅れないか？等を考えるのもテスト駆動で進行すれば難しいですし時間がもったいないので、基本的には毎回act()ヘルパーを使った方が無難だと私は思います。
記事が面白かった方、参考になった方は、是非「イイね」お願いします！
