こんにちは！クラウドソリューション開発部の北島です。
春先に携わっていたプロジェクトにて、JavaScriptで書いたWebサイトの一部をJestを使って単体テストを行いました。今回は、そんな経験からJestのセットアップからテストコードの実行、そして実際に使用した感想についてお話ししたいと思います！
Jestとは
Jestとは、JavaScriptのテストフレームワークの一つです。複雑な設定を行うことなく、テストコードを書けば、誰でもテストを行えることが魅力です。
今回のプロジェクトで作成したWebサイトについて、コードの品質担保や、保守性を向上させるため、関数単位でテストを行えるJestを使用することにしました。
関数単位でテストコードを作ることで、早期にバグの検出、修正を行うことが可能で、条件分岐等のロジックも網羅的に確認することができるメリットがあります。
今回やりたいこと
今回は、渡されたテストの点数を適切な成績評価グループに分類し、成績評価グループを返す関数”getScoreGroup”のテストを行います。成績評価グループの定義と、関数は以下の通りになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//成績評価のラベル const SCORE_GROUP_LABELS = ["E", "D", "C", "B", "A", "S"]; // 成績評価グループを取得する関数 function getScoreGroup(score) { if (score < 50) return SCORE_GROUP_LABELS[0]; if (score < 60) return SCORE_GROUP_LABELS[1]; if (score < 70) return SCORE_GROUP_LABELS[2]; if (score < 80) return SCORE_GROUP_LABELS[3]; if (score < 90) return SCORE_GROUP_LABELS[4]; return SCORE_GROUP_LABELS[5]; } |
各成績評価グループに分類する際に用いる境界値が、正常なのかをJestを用いてテストしたいです。
無事、境界値通りに分類できることが確認できれば成功です！！
準備
環境構築
1.Node.jsがインストールされていること
2.npm または yarnが使用可能であること
まずは、適当な場所に”score-group-test”ディレクトリを作成し、作成したディレクトリに移動します
|
1 2 |
mkdir score-group-test cd score-group-test |
該当ディレクトリ内(score-group-test)で、プロジェクトを初期化してからJestをインストールします。
|
1 2 |
npm init -y npm install --save-dev jest |
次にpackage.jsonのscriptセクションにテストコマンドを追加します。
|
1 2 3 4 5 |
{ "scripts": { "test": "jest" } } |
ソースコードの作成
テスト対象ファイル”Score.js”をプロジェクトのルートに作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//成績評価のラベル const SCORE_GROUP_LABELS = ["E", "D", "C", "B", "A", "S"]; // 成績評価グループを取得する関数 function getScoreGroup(score) { if (score < 50) return SCORE_GROUP_LABELS[0]; if (score < 60) return SCORE_GROUP_LABELS[1]; if (score < 70) return SCORE_GROUP_LABELS[2]; if (score < 80) return SCORE_GROUP_LABELS[3]; if (score < 90) return SCORE_GROUP_LABELS[4]; return SCORE_GROUP_LABELS[5]; } module.exports = {getScoreGroup}; |
境界値テストを行うためのテストファイルを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
// Score.test.js const { getScoreGroup } = require('./Score'); describe('getScoreGroup関数の境界値テスト', () => { // E評価の境界値テスト (0-49点) test('0点はE評価', () => { expect(getScoreGroup(0)).toBe('E'); }); test('49点はE評価', () => { expect(getScoreGroup(49)).toBe('E'); }); // D評価の境界値テスト (50-59点) test('50点はD評価', () => { expect(getScoreGroup(50)).toBe('D'); }); test('59点はD評価', () => { expect(getScoreGroup(59)).toBe('D'); }); // C評価の境界値テスト (60-69点) test('60点はC評価', () => { expect(getScoreGroup(60)).toBe('C'); }); test('69点はC評価', () => { expect(getScoreGroup(69)).toBe('C'); }); // B評価の境界値テスト (70-79点) test('70点はB評価', () => { expect(getScoreGroup(70)).toBe('B'); }); test('79点はB評価', () => { expect(getScoreGroup(79)).toBe('B'); }); // A評価の境界値テスト (80-89点) test('80点はA評価', () => { expect(getScoreGroup(80)).toBe('A'); }); test('89点はA評価', () => { expect(getScoreGroup(89)).toBe('A'); }); // S評価の境界値テスト (90-100点) test('90点はS評価', () => { expect(getScoreGroup(90)).toBe('S'); }); test('100点はS評価', () => { expect(getScoreGroup(100)).toBe('S'); }); }); |
ここまで作業を行い、ディレクトリ構成も下記であれば準備完了です！
|
1 2 3 4 5 6 7 8 9 10 |
score-group-test/ │ ├── package.json # npm設定ファイル（Jestの設定を含む） ├── package-lock.json # 依存関係のロックファイル │ ├── node_modules/ # インストールされたパッケージ │ └── ... # 様々な依存パッケージ │ ├── Score.js # テスト対象の成績評価グループ判定関数 └── Score.test.js # Jestの成績評価グループ判定テストファイル |
テストコードの実行
さあ！あとは下記のコマンドを実行してテストを行うだけです！！
|
1 |
npm test |
以下のような実行結果が出力されれば境界値テスト成功です！
使用してみた感想
実際にJestを使って関数単位のテストコードを書いてみて、改めて「どのような入力に対して、どのような出力が期待されるか」を明確に考える力が求められることを実感しました。特に、境界値のような見落としやすい条件についても丁寧にテストを書くことで、ロジックの漏れや不具合の早期発見につながるという実感がありました。
また、シンプルな関数でもテストケースを丁寧に作成するには一定の労力がかかるため、「書けば終わり」ではなく「どう保守しやすく書くか」を意識することの大切さを学びました。テストを書くことで安心感が得られる反面、テストコード自体の質もまたソースコード同様に重要であるという意識を今後も持ち続けたいと思います。
さらに春先でのプロジェクトでは、GitHub Copilotも積極的に活用しました。関数の仕様やテストパターンをある程度書き始めると、Copilotが補完候補として次に書くべきテストケースを提案してくれるため、テスト観点の抜け漏れに気づけたり、効率よくコーディングを進められる場面が多々ありました。
AIツールは補助的な立場ではありますが、人の判断と組み合わせることで開発効率・品質の両方を底上げできるという点で、併せて利活用できるようになればと感じました。
エコモットでは、私たちと一緒にモノづくりをしていく仲間を募集しています。
弊社に少しでも興味のある方は、ぜひ下記の採用ページをご覧ください。
