フロントエンドのためのテストの必要性と始め方！

『フロントエンド開発のためのテスト入門』の著者であるTakepepeさんをお招きしてトークイベントを開催しました！

トピック

はじめに
テストをはなぜ書く？
そもそも「テストを書く」とは？？
テストの種類
テストを始めるには
テストの必要性を伝える難しさ
さいごに

はじめに

本日は『フロントエンド開発のためのテスト入門』の著者であるTakepepeさんをお招きして、フロントエンドのためのテストの必要性と始め方についてお話ししていただきました！

トークイベントが始まる前から100人以上の方にスペースのリマインダーを設定していただき、運営メンバー一同だいぶ興奮しておりました。実際に今回のトークイベントは初めて参加人数が100人を突破し、あっつあつのトークイベントになりました！Takepepeさんと参加してくださった皆さんに心より感謝申し上げます！

テストはなぜ書くのか

では、早速本題へ。

まず、テストはなぜ書かなくてはならないのでしょうか？

一番の目的は、予期せぬ故障を防ぐためです！実際にコメントでも、テストを始めたきっかけとして「予期せぬ故障を経験して」ということを挙げている方がいましたね... 公開してバグってからじゃ遅いですものね！テスト大事！

そもそも「テストを書く」とは？

フロントエンドエンジニアの皆さんは「テストを書く」と当たり前のように言いますが、個人的に「テストを書く」という感覚が全くわかりませんでした。

ですが、今日のお話を聞いてやっとなんとなくイメージが掴めました！

まず「テストを書く」にはJestというテストのフレームワークを使うそうです。

そしてindex.jsというファイルがあったとしたら、テストのためのindex.test.jsを用意します。そこにJSやTSといった言語を用いてコードを書いていき、実際のブラウザ、もしくは仮想上のブラウザであるJSDOMにてテストをしていきます。

ちなみにテストを行う場所の選択方法としては、基本的にはJSDOMの方が速いそうです。ただ、実際のブラウザ上でテストすべき例として、CSSは実際のブラウザでないと確認できない部分が多いそうです。（なぜなのかちょっとよくわからなかった...）
それ以外のロジックだけ確認するような処理はJSDOM上が良いとのことでした！

ブラックボックステストという機能や関数の中身の処理には着目せず、ユーザーからみた振る舞いだけを確認するテストにおいては、storybook (https://storybook.js.org/)というツールを使うことが多いそうです。動作が行われた時に振る舞いをキャプチャして、正常時の振る舞いとバグが起きた時の振る舞いを見比べることができたり、バグが起きた時に自動的に通知も送ることができるそうで、すごすぎる！