Jestの演習問題を作ってみた
会社の新人研修でソフトウェアテストの演習を担当することになり、演習問題とその解答例を作った。（ソフトウェアテストの講義に演習の時間が今年度より追加されたので、使いまわせる前例がなかった）
内容としてはJestでユニットテストを書いてみるというもので、いくつか実務で見かけるだろう要素をピックアップして6問作成した。（ユニットテストをそもそも書いたことがないという人を想定して作成）
解答例のページをReactで作ってGithub Pagesに公開したので、それをここで紹介する。（社内向けにはGitlab Pagesで公開した）
成果物
Viteの公式に従ってGithub Actionsを設定するだけだった。ルートのパスを打ち込むとヘッダのみの真っ白なページになってしまっているのを見つけがけど、パッとわからなかったので諦めた。
なぜ公開した？
演習は各自がリポジトリをクローンしてローカルでコードを書いてもらう形で進めるが、「そもそも書き方がわからない」という人向けに、解答例もあわせて共有したほうがいいと判断した。共有方法として思いついたのは以下。
Google Slideなどの講義資料にコードを貼る
演習用リポジトリに解答例のディレクトリもつける（演習用ディレクトリと解答例ディレクトリを分ける）
静的サイトで公開（やったのはこれ）
1→3の順でコストも難易度も上がる。研修まで時間があったので、まずは3を目指し、厳しくなったら1に切り替えようという方針にして、どうにか3をやり遂げたという感じ。
ふりかえり
まず、ユニットテストやソフトウェアテストについての自分の知識が深まるいい機会になった。それまでユニットテストはメソッドを追加した時にあわせて書くものという程度の認識だったが、その責務や目的、特徴など概念的な部分をきちんと学ぶきっかけになった。テスティングトロフィーなどソフトウェアテスト全体における概念も学ぶことができた。シンプルに知っている概念・単語が増えた。新しい積読もできたので、早めに読みたい。
Reactアプリを作るという点では、自力で初めて作ってそこそこのレベルまでいったので嬉しい。EslintやPrettierの設定に四苦八苦し、どういうオプションがあるかを全然知らないなと実感した。この辺りは開発効率の向上につなげられる点なので、余裕があればどんなオプションがあるかを真面目にみて改善していきたい。
使用技術
React
Vite
TypeScript
Eslint
Prettier
MUI
Jest
GitHub Actions
GitHub Pages
