2021-08-28FrontendReactはじめにrequestAnimationFrameを使ったカスタムhookを作成したときに、どうテストすればいいのかわからなかったので、メモとして残しておきます。実装を見に行くことにしました。react-useは便利なカスタムhookをまとめているライブラリなので参考になると思いここを見に行きました。実際にrequestAnimationFrameを使っている箇所を調べたろころraf-stubというライブラリを使いテストをしていることをしました。https://github.com/alexreardon/raf-stubraf-stubでは、requestAnimationFrameで実行すべき関数をraf-stub側に保存し、stepという関数を実行したタイミング実行するような実装になっていました。実際に実装する先程挙げたraf-stubを使ってもいいのですが、raf-stubは型がなくDefinitelyTypedにも登録されていません。一つのカスタムhookのためにライブラリを導入するのもどうかなと思ったためraf-stubを参考に簡単に自分で実装しました。メソッドを呼び出すという形になっています。このRafStubを使って実際にテストコードを書いてみます。今回は以下のようなカスタムhookをテストしてみます。count}ひたすらincrementという関数を呼び、countを増加させていく簡単なhookになります。これのテストを以下に実装してみます。実行するたびにcountが1ずつ増えているのがテストできています。おわりに最近テストを書く機会がなかったのですが、テストを書くとやはり安心してリファクタリングできるし、心理的安全性が確保されていて非常に良いですね。