Jestとは？

Jestは、JavaScriptのコードをテストするためのツールです。あなたが書いたコードが正しく動くかどうかを自動的にチェックしてくれます。

Jestは非常に一般的で広く使われているJavaScriptテストフレームワークの一つです。

Jest: JavaScriptテストフレームワーク ゼロコンフィグ 設定不要ですぐに テストを始められる テスト実行とモック テスト環境と モック機能が一体化 スナップショットテスト UIコンポーネントの 変更を自動検出 パラレル実行 複数のテストを 並列で高速に実行 主な採用企業 • Facebook/Meta • Twitter • Airbnb • Spotify • New York Times • PayPal

jQueryのフォームバリデーションをテストする簡単な手順

1. 基本的な考え方

例えば、電話番号のバリデーション（確認）をするコードがあるとして：

// jQuery使用例
$("#phone").on("input", function() {
  const phoneNumber = $(this).val();
  const isValid = /^[0-9-]{10,13}$/.test(phoneNumber);
  
  if (isValid) {
    $("#phoneError").hide();
    $("#submitButton").prop("disabled", false);
  } else {
    $("#phoneError").show();
    $("#submitButton").prop("disabled", true);
  }
});

このコードが正しく動くか確認したいとき：

2. テストの基本ステップ

  1. テスト用のHTMLを用意する
    • フォームの要素（入力欄・エラーメッセージ・ボタン）をテスト環境に作る
  2. テストしたい操作を行う
    • 例：電話番号欄に「090-1234-5678」と入力する操作をシミュレート
  3. 結果を確認する
    • 例：エラーメッセージが非表示になっているか
    • 例：送信ボタンが有効になっているか
Jestテスト実行フロー 1. テストコード作成 test()関数で期待する 動作を記述 2. テスト実行 npm test または jest コマンドで実行 3. 結果確認 成功/失敗が レポート表示される // テストコード例 test(‘電話番号が正しく検証される’, () => { // テスト環境のセットアップ document.body.innerHTML = ` <input id=”phone”> `; // 期待値の検証 }); // テスト結果出力例 PASS src/validation.test.js ✓ 電話番号が正しく検証される (23ms) ✓ 無効な電話番号がエラーになる (12ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Time: 1.234s

3. Jestで書くと

test('有効な電話番号を入力したらエラーが消える', () => {
  // 1. テスト用のHTMLを用意
  document.body.innerHTML = `
    <input id="phone">
    <div id="phoneError" style="display:block;">エラー</div>
    <button id="submitButton" disabled>送信</button>
  `;
  
  // jQueryの初期化（実際のコードを読み込む）
  require('./あなたのJSファイル.js');
  
  // 2. テストしたい操作を行う
  $('#phone').val('090-1234-5678').trigger('input');
  
  // 3. 結果を確認する
  expect($('#phoneError').css('display')).toBe('none');
  expect($('#submitButton').prop('disabled')).toBe(false);
});

シンプルに言うと

Jestを使ったテストとは、「もし○○という入力をしたら、××という結果になるはず」ということを自動的に確認する仕組みです。フォームのバリデーションであれば、正しい入力をしたときとそうでないときの両方をテストして、期待通りの動作をするか確認します。

簡単に始めるには：

  1. Jestをインストール
  2. テストファイルを作成
  3. テスト内で必要なHTMLを設定
  4. 操作をシミュレート
  5. 結果を確認

実際に始める場合は、基本的なJestの使い方から学ぶと良いでしょう。