Zenn
Closed5

Cypressでカバレッジを取得するために必要なこと

KanonKanon

これはなに？

計測のために入れているこれが意味不明だった。

npm i -D @cypress/code-coverage swc-plugin-coverage-instrument
KanonKanon

swc-plugin-coverage-instrument

まずこれは、Next.jsのコンパイラであるswcを使ってコンパイルする時に、コードカバレッジを測定するための仕掛けを施すためのプラグインらしい。

詳しくはこっちのスクラップに。

https://zenn.dev/yskn_sid25/scraps/6740e8e9523a4f

で、このプラグインを有効にするためにnextjs.config.jsに以下を記載している。

const withImages = require("next-images");

module.exports = withImages({
  trailingSlash: true,
+  experimental: {
+    swcPlugins: [
+      ["swc-plugin-coverage-instrument", {
+        compact: false
+      }]
+    ],
+  },
});

設定ファイルの意味は、以下の通りらしい。

experimentalは、実験的な機能や機能のセットを有効にするためのオプションです。通常、これらの機能はまだ完全に安定しておらず、将来のバージョンで変更される可能性があります。そのため、experimentalオプションを使用することで、開発者が新しい機能を試してみることができますが、本番環境での使用は推奨されません。

この例では、Next.jsの設定ファイルでexperimentalオプションが使用されています。具体的には、swcPluginsという実験的な機能が有効になっています。これにより、SWC（Speedy Web Compiler）のプラグインが有効になり、特定のSWCプラグイン（swc-plugin-coverage-instrument）が使用されています。

swc-plugin-coverage-instrumentは、SWCのカバレッジ計測プラグインであり、JavaScriptコードをカバレッジ計測可能な形式に変換します。この設定により、Next.jsプロジェクトでSWCを使用してコードをコンパイルする際に、カバレッジ計測が可能になります。

かつ、

compact: falseは、SWCプラグインの設定の一部であり、この設定がswc-plugin-coverage-instrumentプラグインに対して適用されます。

通常、コンパイラやトランスパイラは、出力されるコードをできるだけコンパクトにすることが目的です。これにより、ファイルサイズを最小限に抑えたり、読みやすさを向上させたりすることができます。しかし、カバレッジ計測を行うためには、ソースコードの変換が行われた後も、元のコードとのマッピングが維持される必要があります。

compact: falseを設定することで、SWCプラグインがコンパイルされたコードをより保守的に処理し、コンパイル前のソースコードとのマッピングを維持します。これにより、カバレッジ計測ツールが正確にソースコードのどの部分が実行されたかを追跡しやすくなります。

つまり、ソースコードのコンパイル・バンドルによって仕込まれたカバレッジ計測のために仕掛けられたコードが意図せず変更されるのを抑えているらしい。

KanonKanon

@cypress/code-coverage

で、これは収集したカバレッジをレポートにして出力するための拡張機能らしい。

これを使ってカバレッジを取得するために、swc-plugin-coverage-instrumentを入れているということらしい。

で、npx nyc report --reporter=text-summaryでレポートが見れるということは、おそらく@cypress/code-coverageはnycベースでできていて、babel×istanbulの場合でもswc×swc-plugin-coverage-instrumentの場合でも対応できるようにしているんだと思われる。なぜならswc-plugin-coverage-instrumentにはistanbulへの互換性があるから。

で、これを使うために以下のような設定をしている。

import { defineConfig } from "cypress";
+ import codeCoverageTask from "@cypress/code-coverage/task";

export default defineConfig({
  env: {
    enableMock: true,
+    codeCoverageTasksRegistered: true
  },
  e2e: {
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    },
    baseUrl: "http://localhost:3000"
  },
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack"
    },
    defaultCommandTimeout: 6000,
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    }
  }
});

意味は、↓ということらしい。

setupNodeEvents関数は、CypressがNode.jsのイベントにフックして特定のタスクを実行するためのメカニズムです。この場合、codeCoverageTaskという関数がNode.jsのイベントにフックされ、カバレッジ計測のためのタスクが登録されています。

具体的には、setupNodeEvents関数は、Cypressのテストランナーが起動する際に呼び出され、テストランナーの設定とオブジェクト on が渡されます。そして、codeCoverageTask関数がこの on オブジェクトと設定オブジェクト config を引数に受け取り、カバレッジ計測のタスクを登録します。

この設定により、テストランナーが起動されるたびにカバレッジ計測が自動的に実行されるようになります。

このスクラップは16日前にクローズされました