テスト環境の構築

jQueryコードのテストを書くことは、堅牢で保守しやすいWebアプリケーションを構築するうえで重要です。早い段階でバグを発見し、コードが期待どおりに動作することを確認できます。

• リグレッションを防止: 新しい変更によって既存の機能が壊れていないことを確認できます。
• コード品質を向上: モジュール化された、テスト可能なコードを書くことにつながります。
• 共同作業を促進: コンポーネントがどのように動作すべきかを示す、明確なドキュメントになります。

jQueryを含むJavaScriptをテストするには、テストランナーが必要です。このツールがテストを実行し、結果を報告します。

一般的な選択肢は次の2つです。

• Jest: Facebookが提供する、最新で多機能なテストフレームワークです。Reactで広く使われていますが、あらゆるJSに適しています。
• QUnit: jQuery向けのテストフレームワークです。Jestよりシンプルですが、機能は少なめです。

このレッスンでは、機能が充実しており広く採用されているJestのセットアップに焦点を当てます。

Jestをインストールする前に、Node.jsプロジェクトが必要です。まだない場合も、簡単に作成できます。

ターミナルでプロジェクトのディレクトリに移動し、次を実行します。

このコマンドにより、プロジェクトの依存関係とスクリプトを管理するpackage.jsonファイルが作成されます。

それではJestをインストールしましょう。jQueryはブラウザーのDOM（Document Object Model）とやり取りすることが多いため、jest-environment-jsdomも必要です。JSDOMはNode.jsでブラウザーのような環境を提供するため、jQueryコードで仮想DOMを操作できます。

開発用依存関係としてインストールします。

これにより、JestとJSDOMがpackage.jsonに追加されます。

JestにJSDOMを使用させるには、設定が必要です。package.jsonにtestスクリプトを追加するか、jest.config.jsファイルを作成します。

方法1: package.json内で設定

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

--env=jsdomフラグにより、JestはJSDOM環境でテストを実行します。

Jestは、__tests__ディレクトリ内のテストファイル、または.test.js（あるいは.spec.js）で終わるファイルを探します。シンプルなテストファイルを作成しましょう。

プロジェクトのルートに__tests__という名前のディレクトリを作成し、そこに__tests__/my-feature.test.jsのようなファイルを追加します。

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describeは関連するテストをグループ化し、test（またはit）は個々のテストケースを定義します。

jQueryコードをテストするには、テストファイル自体にjQueryをインポートする必要があります。jQueryはnpm install jqueryでnpmからインストールできます。

次に、テストファイルでインポートします。

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

アサーションは、コードが正しく動作することを確認するための仕組みです。Jestでは、expect()関数とマッチャーを組み合わせてアサーションを作成します。

次は、シンプルなJavaScriptの例です（jQuery固有ではありませんが、アサーションの仕組みを示しています）。

Jestには、豊富なマッチャーが用意されています。ここでは、よく使うものをいくつか紹介します。

• .toBe(value): 完全一致（===と同様）を確認します。
• .toEqual(value): オブジェクトや配列の内容を含めた等価性を確認します。
• .not.toBe(value): 不一致を確認します。
• .toBeTruthy() / .toBeFalsy(): 真偽値としてtrue相当かfalse相当かを確認します。
• .toContain(item): 配列または文字列に項目が含まれているかを確認します。

jQueryでは、これらをjQueryメソッドと組み合わせて使うことがよくあります。たとえば、expect($element.text()).toBe('Expected Text');のように記述します。

テストファイルを準備したら、実行は簡単です。package.jsonで定義したスクリプトを使用します。

Jestはすべてのテストファイルを見つけ、JSDOM環境で実行し、ターミナルに結果を報告します。成功したテストと失敗したテストに加え、失敗の詳細も表示されます。

JestとJSDOMを使ってjQueryのテスト環境をセットアップする方法を学びました。DOMをサポートする基本的なJestのセットアップに不可欠なコマンドと設定は、次のうちどれでしょうか。

このレッスンでは、Jestを使ってjQueryアプリケーション用の堅牢なテスト環境をセットアップする方法を学びました。

• npm initでNode.jsプロジェクトを初期化しました。
• ブラウザー環境をシミュレートするため、Jestとjest-environment-jsdomをインストールしました。
• package.jsonでJestを設定し、JSDOMを使用するようにしました。
• テストファイルの構成、jQueryのインポート、Jestのマッチャーを使った基本的なアサーションの書き方を理解しました。

この基礎があれば、効果的なテストを書き、jQueryコードの信頼性と保守性を確保できます。