JavaScriptテストフレームワーク徹底比較：Jasmine vs Jest vs Mocha vs QUnit

フロントエンド開発において、テストフレームワークの選択は開発速度や保守性に大きな影響を与えます。jasmine、jest、mocha、qunit はそれぞれ異なる哲学で設計されており、プロジェクトの要件に応じて最適な選択が必要です。この記事では、実際のコード例を交えながら、各フレームワークの強みと弱みを深く掘り下げます。

🧪 基本的なテスト構文：describe-itスタイル vs QUnitスタイル

jasmine、jest、mocha は共通して describe / it スタイルを採用しています。これはBDD（振る舞い駆動開発）由来の記法で、テストの階層構造を自然に表現できます。

// jasmine / jest / mocha 共通スタイル
describe('Calculator', () => {
  it('adds two numbers correctly', () => {
    expect(add(1, 2)).toBe(3);
  });
});

一方、qunit は独自のAPIを持ち、QUnit.test() を使います。また、グローバル関数として利用できるため、HTMLファイルに直接埋め込むことも容易です。

// qunit
QUnit.test('Calculator adds two numbers correctly', (assert) => {
  assert.equal(add(1, 2), 3);
});

💡 注意: mocha 自体はアサーションライブラリを含まないため、上記の expect().toBe() は chai や node:assert など別途導入する必要があります。

🔌 アサーションとマッチャー：内蔵 vs 外部依存

jasmine は独自のマッチャーセットを内蔵しており、toBe()、toEqual()、toContain() などがすぐに使えます。

// jasmine
expect([1, 2, 3]).toContain(2);
expect(promise).toBeResolved(); // 非同期専用マッチャー

jest も同様に豊富なビルトインマッチャーを持ち、さらに拡張も容易です。

// jest
expect(user).toMatchObject({ name: 'Alice' });
expect(fetchData).rejects.toThrow();

mocha はアサーションエンジンを含まないため、以下のように外部ライブラリと組み合わせる必要があります。

// mocha + chai
const { expect } = require('chai');
expect(result).to.deep.equal(expected);

qunit はシンプルなアサーションメソッド（equal、deepEqual、ok など）を提供しますが、マッチャーの表現力は限定的です。

// qunit
assert.deepEqual(obj1, obj2);
assert.ok(condition);

🕹️ モックとスパイ：テストダブルの扱い方

jasmine は spyOn() で関数の監視やスタブが可能です。

// jasmine
spyOn(console, 'log');
myFunction();
expect(console.log).toHaveBeenCalledWith('hello');

jest はモック機能が非常に強力で、関数全体を自動的にモックすることもできます。

// jest
jest.spyOn(console, 'log');
// または
const mockFn = jest.fn();
mockFn.mockReturnValue('test');

mocha はモック機能を含まないため、通常は sinon を併用します。

// mocha + sinon
const spy = sinon.spy(console, 'log');
myFunction();
expect(spy.calledWith('hello')).to.be.true;

qunit は @sinonjs/fake-timers や sinon と組み合わせることが一般的ですが、公式サポートはありません。

// qunit + sinon
const stub = sinon.stub(window, 'fetch');
stub.resolves({ json: () => ({}) });

📸 スナップショットテスト：UI変更の検出

jest はスナップショットテストをネイティブサポートしており、Reactコンポーネントやデータ構造の変更を簡単に追跡できます。

// jest
it('renders correctly', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});

jasmine、mocha、qunit はスナップショットテストを直接サポートしていません。必要であれば、jest-snapshot を個別に導入するか、カスタムマッチャーを実装する必要があります。

🌐 ブラウザ対応：実環境でのテスト実行

qunit はHTMLベースのテストランナーを提供し、ブラウザで直接テストを実行できます。デバッグが非常に簡単です。

<!-- qunit HTML runner -->
<div id="qunit"></div>
<script src="qunit.js"></script>
<script src="tests.js"></script>

jasmine もブラウザ向けのスタンドアロン版を提供しており、同様にHTMLで実行可能です。

mocha は mocha.js とCSSをHTMLに読み込むことでブラウザ実行が可能ですが、設定が必要です。

jest はデフォルトでJSDOM上で動作し、実際のブラウザとは異なる環境でテストが実行されます。実ブラウザでのテストには jest-playwright や jest-puppeteer のような追加パッケージが必要です。

⚙️ 設定と拡張性：ゼロコンフィグ vs フルカスタマイズ

jest は「ゼロコンフィグ」を謳っており、多くのプロジェクトで追加設定なしに動作します。BabelやTypeScriptとの統合も自動で行われます。

jasmine も最小限の設定で動作しますが、高度なカスタマイズ（例：カスタムレポーター）には設定ファイルが必要です。

mocha は極めて柔軟で、レポーター、タイムアウト、フックの挙動などを細かく制御できますが、その分初期設定が複雑になりがちです。

qunit は設定オプションが少なく、シンプルさを重視した設計になっています。

🔄 非同期テストの書き方

すべてのフレームワークが非同期テストをサポートしていますが、書き方に違いがあります。

jasmine:

it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeTruthy();
});

jest:

it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeTruthy();
});

mocha:

it('fetches data', async () => {
  const data = await fetchData();
  // アサーションはchaiなどで行う
});

qunit:

QUnit.test('fetches data', async (assert) => {
  const data = await fetchData();
  assert.ok(data);
});

📊 まとめ：どのフレームワークを選ぶべきか

• React/Vueプロジェクト → jest が最もスムーズ
• シンプルで軽量なテスト → jasmine または qunit
• 最大限のカスタマイズ性が必要 → mocha + Chai/Sinon
• jQuery/Ember系プロジェクト → qunit が伝統的に使われる

最終的には、チームのスキルセット、プロジェクトの規模、必要な機能セットを総合的に判断して選ぶことが重要です。