CypressでE2Eテストのカバレッジを測定する

Next.js で作成したアプリケーションに対して Cypress を使って E2E テスト実施時にカバレッジを測定するようにしました。

ライブラリの追加¶

npm install -D @cypress/code-coverage babel-plugin-istanbul

インストール後¶

package.json

  "dependencies": {
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
+   "@cypress/code-coverage": "^3.10.7",
+   "babel-plugin-istanbul": "^6.1.1",
    "cypress": "^12.5.1",
  }

ライブラリを使うための設定¶

ファイルを作成する¶

以下にファイルを作成してカバレッジを測定するための設定をします。

cypress/support/e2e.js

import "@cypress/code-coverage/support";

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["istanbul"]
}

pages/api/__coverage.js

module.exports = require("@cypress/code-coverage/middleware/nextjs");

Server Side のコードカバレッジを取得するために、@cypress/code-coverageプラグインはエンドポイントを必要とします。このエンドポイントは、Next.js の API 規約にしたがって pages/api/coverage.js ファイルに実装されています。このエンドポイントは、既存のグローバルカバレッジオブジェクトを返すか、NULL を返すだけです。

設定ファイルの追記¶

Cypress プラグインは、cypress.config.json ファイルから環境変数を使用して正しいエンドポイントを要求します。

cypress.config.js

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);
      return {
        ...config,
      };
    },
    baseUrl: "http://localhost:3000",
  },
  env: {
    codeCoverage: {
      url: "/api/__coverage__",
    },
  },
});