TOP
記事一覧
jQueryのフォームバリデーションを「Jestでテストする」簡単な手順

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

更新日：2025/03/18

Jestとは？

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

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

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. テストの基本ステップ

テスト用のHTMLを用意する
- フォームの要素（入力欄・エラーメッセージ・ボタン）をテスト環境に作る
テストしたい操作を行う
- 例：電話番号欄に「090-1234-5678」と入力する操作をシミュレート
結果を確認する
- 例：エラーメッセージが非表示になっているか
- 例：送信ボタンが有効になっているか

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);
});