テストフレームワークのOSS比較【2026年版】Playwright・Vitest・CypressでE2E＆単体テスト
オープンソースラボ編集部 ・ 2026年6月13日
「バグを本番前に確実に発見したい」——これを実現するのが自動テストです。2026年はPlaywright（E2E）+ Vitest（単体）の組み合わせがフロントエンド開発のスタンダードになっています。本記事で主要OSSテストツールを比較します。
テストの種類と使い分け
| テスト種別 | 内容 | ツール | 速度 |
|---|---|---|---|
| 単体テスト（Unit） | 関数・コンポーネント単独テスト | Vitest / Jest | 最速 |
| 統合テスト（Integration） | 複数モジュールの連携確認 | Vitest / Testing Library | 速い |
| E2Eテスト | ブラウザ操作でユーザー体験確認 | Playwright / Cypress | 遅い |
| APIテスト | HTTPエンドポイントの検証 | supertest / hoppscotch | 速い |
Playwright：2026年のE2EテストデファクトスタンダードStandard
Playwright（公式サイト↗）はMicrosoftが開発したE2Eテストフレームワークです。Chrome・Firefox・WebKit（Safari相当）を単一テストスクリプトで動かせます。
import { test, expect } from '@playwright/test';
test('ユーザーがログインできる', async ({ page }) => {
await page.goto('https://example.com/login');
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'password123');
await page.click('button[type=submit]');
await expect(page).toHaveURL('/dashboard');
await expect(page.locator('h1')).toContainText('ダッシュボード');
});
# 全ブラウザでテスト実行
npx playwright test
# UIモードで視覚的にデバッグ
npx playwright test --ui
# テストレポート生成
npx playwright show-report
Vitest：ViteプロジェクトのデファクトUnit Test
Vitest（公式サイト↗）はViteベースのテストランナーで、Jestと互換性があり圧倒的に高速です。
import { describe, it, expect } from 'vitest';
import { calculateDiscount } from './discount';
describe('calculateDiscount', () => {
it('10%オフを正しく計算する', () => {
expect(calculateDiscount(1000, 10)).toBe(900);
});
it('割引率が100%を超えると0を返す', () => {
expect(calculateDiscount(1000, 110)).toBe(0);
});
});
DevOps関連OSSはDevOpsカテゴリから。CI/CDでのテスト自動化はGit関連OSSをGitホスティングOSS記事から参照。
Jest vs Vitest の比較
| 観点 | Jest | Vitest |
|---|---|---|
| 起動速度 | 遅い | 最速（Vite利用） |
| ESM対応 | 設定が必要 | ネイティブ |
| 型安全 | 別途設定 | TypeScript標準 |
| API互換 | — | Jest互換 |
| 移行コスト | — | 低（ほぼ互換） |
新規ViteプロジェクトはVitest一択。既存Jestコードは設定変更のみで移行可能です。
テスト戦略：テストピラミッド（2026年版）
△ E2E（Playwright）少数・重要フロー
△△△ Integration（Vitest + Testing Library）
△△△△△ Unit（Vitest）大量・高速
まとめ
2026年のベストプラクティス：**Vitest（Unit/Integration） + Playwright（E2E）**の二枚構成です。JestからVitestへの移行コストは低く、テスト速度が大幅に改善します。
よくある質問（FAQ）
Q. CypressとPlaywrightはどちらが良いですか？
Playwrightが2026年のトップ選択です。マルチブラウザ対応・高速・並列実行・より豊富なAPIが揃っています。CypressはReactと相性が良いComponentテストが得意です。
Q. GitHub ActionsでPlaywrightを動かす設定は？
- uses: microsoft/playwright-github-action@v1
- run: npx playwright test
Microsoftが公式GitHub Actionを提供しており、数行で設定できます。
Q. テストを書いたことがない人はどこから始めますか？
Vitestで純粋関数の単体テストから始めることをおすすめします。入出力が明確な関数は最も書きやすく、テスト駆動開発の習慣もつきやすいです。
関連リンク・公式情報
ここで紹介したツールの一次情報（公式サイト・ソースコード）と、オープンソースラボ内の関連ページをまとめました。導入検討の際にご活用ください。
公式サイト・ソースコード（外部リンク）
オープンソースラボの関連ページ（内部リンク）
