Jestを使った単体テスト自動化について
はじめに
これまで単体テスト仕様書をExcel等で作成し、手動確認によるテストを実施してきましたが、去年業務で初めて「Jest」を使った単体テストの実施しました。
今回は、その「Jest」を使ってテストを実行してみた感想を共有したいと思います。
jestとは
Meta（旧Facebook）によって開発されたJavaScriptテストフレームワークです。
これ一つでテストランナー、アサーション（期待値の検証）、モック機能などが揃う「オールインワン」なツールとして知られています。
メリット・デメリット
メリット
- 単体テストを自動化でき、手動確認の工数を削減できる
- 修正による既存機能への影響を早期に確認できる
- テストを繰り返し実行でき、品質を安定させやすい
- CIと連携しやすく、テストの実行漏れを防げる
デメリット
- 初期設定が分かりづらく、環境によってエラーが発生しやすい
- テストコードの作成・修正に時間がかかる場合がある
- DOM操作や画面表示のテストは慣れが必要
躓いたところ
画面上に「AAAというテキストは表示されているが、BBBというテキストは表示されていない」ことを確認するテストを書いていた際に、以下のエラーに遭遇しました。
// AAAがあることを確認（成功）
expect(screen.getByText('AAA')).toBeInTheDocument();
// BBBがないことを確認（エラー発生）
expect(screen.getByText('BBB')).not.toBeInTheDocument();一見、.not.toBeInTheDocument() を使っているので正しく動くように見えますが、実は getByText を使った時点でテストが落ちてしまいます。
エラー内容: TestingLibraryElementError: Unable to find an element with the text: BBB...
「無いこと」を確認したいのに、「見つからないぞ！」というエラーでテストが止まってしまうというジレンマに陥りました。
解消
この問題は、取得メソッドを getByText から queryByText に変更することで解消しました
// 修正後：queryByText を使用
expect(screen.queryByText('BBB')).not.toBeInTheDocument();
なぜこれで解消できたのか？
React Testing Libraryの検索メソッドには、主に以下の3つの系統があり、要素が見つからなかった時の挙動が異なります。
| メソッド | 要素が見つからない場合 | 主な用途 |
|---|---|---|
| get… | エラーを投げる | 確実に存在するはずの要素を確認する場合 |
| query… | null を返す | 要素が存在しないことを確認したい場合 |
今回の場合、getByTextは要素が見つからない瞬間にエラーを投げてテストを中断させていました。
解消後の、queryByTextは見つからない場合にnullを返してくれるため、そのまま .not.toBeInTheDocument() （nullであることを期待する検証）へと処理を流すことができた、というわけです。
まとめ
今回、初めて実務でJestを実装しました。
実際に動かしてみると、手動で何度も画面をポチポチして確認する手間が省け、テスト実施の時間は短縮されたと感じています。
ただ、テストコードを書く時間自体は、予想以上に長くなってしまいました…。
今後はもっとAIを活用して、テスト自体に割く時間を短縮していきたいなと思いました。
