Cypressでフロントエンドのテストカバレッジを取得する

API7.ai

March 2, 2021

Technology

背景

記事「Stable Product Delivery with Cypress」では、なぜCypressをE2Eテストフレームワークとして選んだかについて説明しました。約2ヶ月間テストケースを洗練させた後、テストカバレッジが十分かどうかを定量化するためにテストカバレッジが必要でした。この記事では、Cypressを使用してAPISIX DashboardのフロントエンドE2Eカバレッジを取得する方法について説明します。

コードカバレッジとは

コードカバレッジは、ソフトウェアテストにおけるメトリクスの一つで、プログラム内のソースコードがどの程度テストされているかを示す割合であり、その結果得られる割合をコードカバレッジと呼びます。テストコードカバレッジは、ある程度コードの健全性を反映します。

依存関係のインストールと設定

テストカバレッジデータを収集するためには、Cypressがデータを収集できるように、元のビジネスコードにいくつかのプローブを配置する必要があります。

Cypress公式では2つのアプローチを推奨しています。1つ目は、nycを使用して一時ディレクトリを生成し、プローブが書き込まれたコードを実行してテストカバレッジデータを収集する方法です。2つ目は、コード変換パイプラインを通じてリアルタイムでコード変換を行い、一時フォルダの手間を省いてテストカバレッジデータを収集する方法です。私たちは2つ目の方法を選択し、フロントエンドE2Eカバレッジを収集します。

  1. 依存関係のインストール
yarn add  babel-plugin-istanbul --dev
  1. Cypressプラグインのインストール
yarn add  @cypress/code-coverage --dev
  1. babelの設定
// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],
  1. Cypressコードカバレッジプラグインの設定
// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';
  1. テストカバレッジの取得

設定が完了したら、テストケースを実行する必要があります。テストケースが実行されると、Cypressはcoverageと.nyc_outputフォルダを生成し、これらのフォルダにはテストカバレッジレポートが含まれています。

1.png

以下のコマンドを実行すると、コンソールにテストカバレッジ情報が表示されます。

npx nyc report --reporter=text-summary

2.png

coverageディレクトリの下には、より詳細なレポートページが表示されます。

3.png

  • Statements: 各ステートメントが実行されたかどうかを示します
  • Branchs: 各ifブロックが実行されたかどうかを示します
  • Functions: 各関数が呼び出されたかどうかを示します
  • Lines: 各行が実行されたかどうかを示します

まとめ

テストカバレッジ率は、プロジェクトの品質をある程度反映しています。現在、APISIX DashboardのフロントエンドE2Eカバレッジ率は71.57%に達しています。私たちはコミュニティと協力して、テストカバレッジ率を向上させ、ユーザーにより信頼性の高い安定した製品を提供することを目指します。

Tags:
APISIX Basics
Testing
Plugin