2026年7月1日

WordPressのJestで単体テストを書く方法

カスタマイズ

はじめに

WordPressプラグインやテーマを開発している際に、コードの品質を向上させるために単体テストを導入することが重要です。JavaScriptのテストフレームワークであるJestを使用することで、簡単にそして効果的に単体テストを書くことができます。

この記事では、JestとWordPress環境をセットアップする方法から、具体的なテストケースを作成するまでのステップを詳しく説明します。

症状・背景

WordPressプラグインやテーマ開発中にコードの品質向上を目指している
JavaScriptライブラリやフレームワークを使った開発経験があり、その知識をWordPressに活用したい
既存のコードベースに対して信頼性のあるテストケースを作成したい

手順・設定方法

ステップ1: WordPressプロジェクトへのJestインストール

# WordPressプラグインディレクトリに移動する
cd wp-content/plugins/your-plugin-name

# npmパッケージマネージャーを初期化
npm init -y

# Jestと関連するツールのインストール
npm install --save-dev jest @wordpress/scripts @babel/core @babel/preset-env @babel/preset-react babel-jest

ステップ2: WordPressプロジェクト用にJest設定ファイルを作成

# テストコードを保存するディレクトリを作成
mkdir tests

# Jestの設定ファイル(jest.config.js)を作成
echo "module.exports = {
  preset: '@wordpress/scripts',
  moduleFileExtensions: ['js', 'jsx'],
  collectCoverageFrom: [
    '<rootDir>/src/**/*.js',
    '!<rootDir>/**/node_modules/',
    '!<rootDir>/*.config.js'
  ]
}" > jest.config.js

ステップ3: WordPressプラグインの単体テストを書く

# サンプルのJavaScriptファイルを作成
echo "export default function helloWorld() {
  return 'Hello, world!';
}" > src/index.js

# 対応するテストファイルを作成
echo "import { expect, jest } from '@wordpress/jest-environment';
import helloWorld from '../src/index';

describe( 'helloWorld', () => {
    test( 'returns expected message', () => {
        const result = helloWorld();
        expect(result).toBe('Hello, world!');
    });
} );" > tests/__tests__/index.test.js

ステップ4: テストを実行し、結果を確認する

# npmスクリプトでJestテストを実行
npm test

注意事項

実際のWordPressプラグインやテーマ開発では、より複雑なコードとテストケースが必要となる場合がある。そのような場合には、jest.config.jsファイルの設定を見直す。
テストスイートが増えるにつれて、テスト結果を分析するためのレポートツールの導入も検討すると良い（例: jest-cliで生成されるJSONレポートを使用）。
WordPress環境とJestのセットアップには初期的な学習コストがあるため、開発者の知識や経騯に合わせて段階的に進めることを推奨する。

まとめ

1. Jestインストール: npmパッケージマネージャーを使用して必要なツールとライブラリをインストールします。

2. 設定ファイル作成: Jestの動作をカスタマイズするために、jest.config.jsファイルを作成します。

3. テストケース作成: プラグインやテーマの関数に対して具体的なテストケースを作成し、品質向上に役立てます。

4. テスト実行: npm testコマンドを使用して自動化されたテストを実行します。

5. 結果確認と改善: テスト結果から問題点を把握し、コードの品質をさらに改善します。

Post Views: 11