テストの無いReactアプリケーションにテストを追加してみたので感想
はじめに
最近チーム内のごたごたでタスクが空いてしまったので常々気になっていた部分の整備を進めていた。
特に気になっていたのはReactで作っているフロントエンドにテストコードが殆ど無いことだった。一応コンポーネントを単体でテストするようなunitテストはあったのだが、フロントエンドをテストするならコンポーネントの単体テストよりも複数コンポーネントを組み合わせて機能をテストするような結合テストの方が有効で必要なので、現状にはあまり満足していなかった。
Write tests. Not too many. Mostly integration.
で、実際に整備してみたわけである。
どうやったか
Jest, react-testing-libraryを使用してコンポーネントをレンダー、シナリオに沿ってuserEventを発火するだけの、簡単なテストを作ってみた。 準備は結構しんどい。まず、対象のコンポーネントがデータフェッチとデータのプレゼンテーションで分離されていないので、コンポーネントがGraphQLリクエストを取得しようとする。 この場合はモックレスポンスを返せるようにしないとエラーになってしまう。 今回はmock service workerを使用してみた。
実際の感想
正直テストについては気休め程度な気がする。もちろん必要だとは思うが、データと状態の変化に伴ってDOMが正しく出力されているかをチェックしていくだけなので、 本当に担保出来ているのか不安にはなる。まあ合ってもいいか程度。サーバと実際に連携して行うE2Eテストの信頼性には全く及ばない。あと、フロントエンドだと結構スタイルが崩れることによる バグが生じるのだけど、その部分はチェックできない。
多分自分のテストのやり方があんまり上手くないんだろうが、現状はそんな感じ。
テストコードでソフトウェアの品質が担保されているかは今のところなんとも言えないが、自分のなかでテストしやすいコンポーネント設計を意識するようになったのは結構大きな成果だった気がする。 データフェッチとデータのプレゼンテーションが混ざってたり、いろいろなロジックがごちゃ混ぜになったコンポーネントをテストするのは正直相当しんどい。 実際にテストを書いてみるとより良いコンポーネント設計について意識を配らせるようになるのは間違いないと思う。
というわけで、リファクタリングとテストの追加を今後も実施します。
