Nuxt 3プロジェクトでE2E Playwrightテストのカバレッジを測定およびレポート作成する方法

はじめに

テストカバレッジを測定し、レポートを作成することで、E2Eテストの網羅率を確認し、コード品質を保証することができます。本記事では、以下のツールを活用して、Nuxt 3プロジェクトでE2E Playwrightテストのカバレッジレポートを生成する方法を説明します。

使用するツールと環境

以下のツールを使用します：

Nuxt 3: プロジェクトのメインフレームワーク
Playwright: E2Eテストツール
nyc: V8ベースのカバレッジ測定ツール
vite-plugin-istanbul: カバレッジをコードに挿入するためのプラグイン
Node.js: バージョン16以上
npm または yarn: ライブラリ管理ツール

手順

必要なライブラリをインストールする

以下のコマンドを実行して、必要なライブラリをインストールします。

npm install --save-dev nyc vite-plugin-istanbul @playwright/test

vite-plugin-istanbul を設定する

nuxt.config.ts に以下のように設定を追加します。

import istanbul from 'vite-plugin-istanbul';

export default defineNuxtConfig({
  vite: {
    plugins: [
      istanbul({
        include: ['src/**/*.js', 'src/**/*.vue'], // テスト対象のファイル
        exclude: ['node_modules', 'test', '.nuxt'], // 除外するフォルダ
        extension: ['.js', '.vue'], // 対象となるファイル拡張子
        requireEnv: true, // USE_COVERAGE=true で有効化
      }),
    ],
  },
});

nyc を設定する

package.json に以下の nyc 設定を追加します。

{
  "nyc": {
    "all": true,
    "include": ["src/**/*.js", "src/**/*.vue"],
    "exclude": ["node_modules", "test", ".nuxt"],
    "extension": [".js", ".vue"],
    "reporter": ["text", "html"]
  }
}

baseFixtures.js ファイルを作成する

baseFixtures.js を作成し、テストカバレッジを収集します。このファイルはPlaywrightのコンテキストでカバレッジ情報を収集し、.nyc_output フォルダに保存します。

• ファイルの作成
  tests/baseFixtures.js を以下の内容で作成します。

import fs from 'fs';
import path from 'path';
import { test as baseTest } from '@playwright/test';

const coverageOutput = path.join(process.cwd(), '.nyc_output');

export const test = baseTest.extend({
  context: async ({ context }, use) => {
    // Coverageを初期化
    await context.addInitScript(() => {
      window.__coverage__ = window.__coverage__ || {};
    });

    // Coverageを収集して保存
    await context.exposeFunction('collectCoverage', (coverage) => {
      if (coverage) {
        fs.writeFileSync(
          path.join(coverageOutput, `playwright_coverage_${Date.now()}.json`),
          coverage
        );
      }
    });

    await use(context);

    for (const page of context.pages()) {
      await page.evaluate(() =>
        window.collectCoverage(JSON.stringify(window.__coverage__))
      );
    }
  },
});

export const expect = test.expect;

Playwrightテストに baseFixtures.js をインポート

各テストファイルで baseFixtures.js をインポートして使用します。

import { test, expect } from './baseFixtures';

test('トップページの表示を確認', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.locator('h1')).toHaveText('Welcome');
});

カバレッジレポートを生成する方法

・ テストを実行してカバレッジを収集
以下のコマンドで、環境変数 USE_COVERAGE=true を設定してテストを実行します。

USE_COVERAGE=true npx playwright test

・ カバレッジレポートを生成

テスト実行後、以下のコマンドでカバレッジレポートを生成します。

npx nyc report --reporter=html --reporter=text
HTMLレポートは coverage/ フォルダ内に保存されます。coverage/index.html をブラウザで開くと詳細を確認できます。

カバレッジ漏れの問題を解決する方法
ファイルがレポートに含まれない場合
カバレッジ漏れを防ぐために、nyc に --all フラグを追加して、未実行ファイルをレポートに含めます。

npx nyc --all --reporter=html --reporter=text npm run test

未実行ファイルを強制的にロード
loadAllFiles.js を作成し、すべての対象ファイルをロードします。

const context = require.context('../src', true, /\.(js|vue)$/);
context.keys().forEach(context);

テストの先頭で loadAllFiles.js をインポートします。

import './loadAllFiles';

まとめ

以上の手順で、Nuxt 3 プロジェクトの E2E Playwright テストに対するカバレッジレポートを正確に生成できます。特に、vite-plugin-istanbul と nyc を活用することで、未実行ファイルも含めた完全なレポートを作成できます。