Jestの始め方 — 買い物の合計をテストしてみよう

ひよこ

りんご200円を二つ買ったら400円。これをテストにできる？

ペンギン先生

できるよ。価格と個数から合計を返す関数を作り、実際の値が期待する400かJestで確かめよう。画面全体を作らなくても、小さな計算から始められる。

ひよこ

Jestはどういうツール？

ペンギン先生

JavaScriptのテストを実行し、期待値との違いを報告するツールだよ。今回の例は新しいNode.jsプロジェクトとCommonJS。既存のESM・TypeScript環境にそのまま当てはめないでね。

ひよこ

最初は何を準備するの？

ペンギン先生

Node.jsとnpmを用意し、Jestを開発用依存へ入れる。関数、テスト、npmのtestスクリプトを作る。本文の小さな二ファイルを使えば、成功したことを確認できるよ。

ひよこ

成功したら、もう安心？

ペンギン先生

そのテストで確かめた条件に合ったということだよ。個数ゼロや境界値、入力の不正など、必要なケースは別に考える。一つの成功からバグがないとは結論しない。

ひよこ

失敗するところも見た方がいい？

ペンギン先生

まず期待値を399に変え、400との違いが出ることを確認しよう。その後400に戻す。テストが意図した違いを検出できるか、手で確かめられるね。

ひよこ

外部APIを使う処理はどうする？

ペンギン先生

モックを使うと、外部サービスの代わりの結果を用意できる。jest.fnやspyOnは用途が違い、置き換えた処理の復元にも気を付ける。モックの成功だけでは実際の接続は保証できない。

ひよこ

カバレッジを80%にすれば十分？

ペンギン先生

一律の合格ラインではないよ。文、分岐、関数など何を数えるかが異なり、高い値でも重要な条件を見落とせる。まず仕様と失敗しやすい境界を確かめよう。

ひよこ

VitestやCIも必要なの？

ペンギン先生

Vite中心の環境ではVitestも候補。既存設定との相性を見よう。CIでテストを実行し、マージの必須チェックにするには別の設定がいる。Jestを入れるだけで公開が自動的に守られるわけではないよ。

まず、200円を二つ買う計算を確認する

Node.jsのサポート中のLTSとnpmを用意します。新しいCommonJSの練習プロジェクトで始めます。既存のESMやTypeScriptプロジェクトの設定は変更しません。

mkdir jest-shopping-demo
cd jest-shopping-demo
npm init -y
npm install -D jest
npm pkg set scripts.test="jest"

total.cjsを作ります。

function total(price, count) {
  return price * count;
}
module.exports = total;

total.test.cjsを作ります。

const total = require('./total.cjs');
test('200円の商品を二つ買う', () => {
  expect(total(200, 2)).toBe(400);
});
test('個数ゼロなら合計もゼロ', () => {
  expect(total(200, 0)).toBe(0);
});

npm test -- --runInBand

二つのテストがPASSになれば成功です。今度は最初の期待値だけを399に変えます。FAILと400との差を確認したら、400へ戻して再実行しましょう。テストが値の違いを検出することを体験できます。

テストの三つの部分

計算関数が正しくても、画面から違う個数を渡す、注文を保存できないといった問題は別です。小さな関数のユニットテスト、部品を組み合わせる統合テスト、利用者の流れを見るE2Eテストで、確かめる範囲を分けます。

モックと実物を分ける

jest.fn()などで、通信先の代わりの結果を用意できます。通信に左右されず条件を試せる一方、そのテストだけで本物のAPIと接続できるとは分かりません。置き換えた関数・グローバルの値が後のテストへ残らないよう、復元と片付けを行います。

よくある詰まりポイント

• importの例をコピーしたら動かない：このページはCommonJSです。ESMの設定や変換処理は公式の専用案内を確認します。
• テストが見つからない：ファイル名と実行フォルダー、既存のtestMatch設定を確認します。
• カバレッジが高いのに不具合：行を通ったことと、大切な結果を検証したことは同じではありません。

もう少し詳しく：TDDとCI

TDDは失敗するテスト、通る最小限の実装、整理を繰り返す進め方です。Jest自体がTDDを強制するわけではありません。CIへ加える際は一回で終了する実行方法と、失敗時の必須チェック設定も確認します。GitHub Actions入門へ進む前に、まず手元で成功と失敗の終了状態を確認しましょう。

ペンギン先生のまとめ

「Jest」って出てきたら「コードの結果と、期待した結果を照らし合わせるテスト係」と思えばだいたいOK！ 小さな計算で、成功も失敗も一度見てみよう。

参考資料

• Jest：導入 — 依存導入・期待値・testスクリプト
• Jest：ESM — ESMの実行条件
• Jest：モック — モックの動作と復元
• Jest：CLI — runInBandとカバレッジ
• Vitest：導入 — Viteとの関係
• GitHub：必須チェック — マージ条件