概要

テストカバレッジは、テストによってコードがどれだけ網羅されているかを示す指標で、Next.jsのプロジェクトにおいて重要な役割を果たします。高いテストカバレッジを維持することにより、コードの品質を向上させ、リグレッションバグを減らすことが可能です。この記事では、Next.jsでテストカバレッジを向上させるためのテクニックとツールについて解説します。

Jestでのカバレッジ計測

カバレッジ計測の設定

Jestを使用する場合、以下のコマンドでカバレッジを取得できます。

jest --coverage

Jestはデフォルトでカバレッジのレポートを生成し、コードのどの部分がテストされていないかを可視化します。jest.config.jsに設定を追加することで、カバレッジをより柔軟に管理できます。

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src//*.{js,jsx,ts,tsx}', '!src//*.d.ts'],
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'lcov'],
};

この設定で、特定のファイルをカバレッジ計測の対象から除外したり、レポートのフォーマットを指定できます。

カバレッジの基準値設定

プロジェクトの品質を維持するために、テストカバレッジの基準値を設定することが推奨されます。例えば、ステートメントやブランチのカバレッジ目標を以下のように設定できます。

coverageThreshold: {
  global: {
    statements: 80,
    branches: 70,
    functions: 85,
    lines: 80,
  },
},

これにより、基準を満たさない場合にテストが失敗するため、品質の担保に役立ちます。

Playwrightでのカバレッジ計測

E2EテストにPlaywrightを使用する場合、playwright-test-coverageパッケージを使うことで、カバレッジを測定することができます。PlaywrightとIstanbulを組み合わせてカバレッジを取得する手順は以下の通りです。

  1. 必要なパッケージをインストールします。

    yarn add @playwright/test playwright-test-coverage babel-plugin-istanbul

  2. next.config.jsでカバレッジモードの設定を追加します。

    module.exports = () => {
  if (process.env.COVERAGE) {
    return {
      webpack: (config) => {
        config.module.rules.push({
          test: /\.(js|jsx|ts|tsx)$/,
          loader: 'babel-loader',
          options: {
            plugins: ['istanbul'],
          },
        });
        return config;
      },
    };
  }
  return {};
};

  3. Playwrightの設定ファイルで、カバレッジ取得用のサーバー設定を行います。 これにより、E2Eテストでのカバレッジレポートを生成し、テスト範囲を広げられます。

Storybookを活用したスナップショットテスト

UIコンポーネントのテストカバレッジを向上させるために、StorybookとStoryshotsを活用すると効率的です。StorybookのPlay functionを使うことで、UIのインタラクションテストも簡単に追加できます。これにより、UIの変化に対して自動的にカバレッジを取得し、視覚的なテストもカバーできます。

まとめ

Next.jsでのテストカバレッジ向上は、プロジェクトの品質を保つために重要です。JestやPlaywright、Storybookなどのツールを活用することで、効率的にテストカバレッジを計測・改善できます。最適なカバレッジ基準を設定し、コードの網羅性を確保することで、長期的なプロジェクトにおける信頼性と保守性が向上します。