【フロントエンド】テストコードを書いて欲しい #React

はじめに

テストコードを書くべきだと言う話はエンジニアをやっていると耳にタコができるぐらい聞くかと思います。
でも、意外とフロントエンドのテストコードを書いたことがある方は少ないんじゃないでしょうか？

今回は、フロントエンドこそテストコードを書いて欲しいと言う話をします。

バックエンドであればAPIを叩いてレスポンスを確認したり、フロントエンドであればブラウザでぽちぽちすれば動作は確認できるかと思います。
逆に言うと、動作環境を用意し試してみるまで正しく動作しているかわからない。ということになります。

コードレビューをしている時に思うんです。
コードを見ればどんなことをしているのかは大体わかるけど、、これ、本当に動くんだろうか。。と

そんな状態でとは言えないです。

テストコードを書くと、実装スピードが上がります。

コード量が増えるんだから時間がかかるだろう。と思われがちかと思いますが、逆だと思います。
テストコードがないから実装に時間がかかってるんです。

かなり気をつけていないと、一つの関数に二つ以上の機能を持たせてしまうことがあります。
小さいプログラムだとそこまで可読性が下がらずに書けてしまったりするので、気づけないんですね。

でも、テストコードを書くと、検証したい内容とは直接的に関係のない処理やデータをモックしないといけないから気づけたりします。

よくテストコードの副次効果と言われたりしますが、僕はむしろこちらがメインぐらい重要だと思います。

上記のテストコードを書く理由を踏まえた上で、「なぜフロントエンドこそ書くべきなのか」という話をします。

フロントエンドは環境が固定できるバックエンドとは違い、ユーザーの手元で動くコードがほとんどです。

APIにも依存し、ユーザーの行動、環境にも依存してしまいます。

動作が不安定なフロントエンドだからこそテストコードが必要だと思います

先に話した通り、フロントエンドはバックエンドに依存します。
つまり、バックエンドの実装が終わるまで動作テストできなったりします。

モックデータを使って先に実装したいですよね？
モックデータを返すサーバーを用意するより、テストコードをきちんと書いてモックデータを読み込むようにすれば良いと思います。

他にも、APIを叩けば動作させることができるバックエンドとは違い、ブラウザを立ち上げ、該当ページまで順にアクセスしないといけない
という制約もあります。
アクセスコントロールなどがあるとこういう時間が無駄になってきます。

今回は、フロントエンドこそテストコードを書いて欲しいという話をしました。
書き方がわからない。みたいな人もいると思うのでまたの機会に書き方についても話せればと思います。