React testing libraryはactを内部で呼んでくれる
Reactのユニットテストで中の処理が全てレンダリングされることを保証してくれるactヘルパーというものを前に紹介しました。
Reactのact()の中には何を書けばいいのか？
actヘルパーはよく多用する為、その性質上ボイラープレートコードになってしまいます。
Reactにはユニットテストで使える便利な機能を集めたReact testing library(以下RTL)というライブラリが存在します。このライブラリではrender等の関数の内部で、レンダリングに関する処理をはじめからactでラップしてくれています。
その為、RTS関連のメソッドを使う場合は、actをテストコードに記述する必要が無くなります。
よく起きる問題
しかし、RTSを使用してテストコードを記述しても、よく以下のような警告が出力されることがあります。
Warning: An update to SampleComponent inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
・
・
・
描画内容を更新する処理はactでラップしてという警告ですが、RTSを使っていればactは勝手にラップされているはず。当初は原因がわからず、困っていました。いろいろな記事を調べてみた結果、こんな記事を見つけました。
この記事によると、どうやらイベントを実行すると間接的に動作するHooksやコールバック等が非同期になっていると、それらの処理がactヘルパーを抜けた後にも実行されるようです。
こういった問題を解決するwaitForという関数があります。別記事に詳細が書かれているので良ければそちらも見てもらえると参考になると思います。
React Testing Libraryを使って、関数の中の非同期関数のテストをする。
記事が面白かった方、参考になった方は、是非「イイね」お願いします！
