hitとmapの分離

CIでbabelコンパイル時に生成される初期カバレッジソースファイルを収集します。

理由

完全なコンパイル対象ファイルの収集: コンパイル過程で、babel-plugin-canyonプラグインを通じて、各コンパイル対象ファイルの初期カバレッジファイルを分析・解析し、.canyon_outフォルダに保存します。
事前収集による負荷軽減: 初期カバレッジファイルを事前に報告しない場合、UIの自動テスト中にこれらのカバレッジファイルがすべて報告され、大きな転送負荷が発生します。事前収集により、90%以上の転送負荷を削減できます。

💡

Tip

これは必須ではありませんが、正確で安定したカバレッジデータの収集が必要な場合は、強く推奨されます。

初期カバレッジデータの報告

babel-plugin-canyonプラグインは、コンパイル時にコンパイル対象ファイルの初期カバレッジファイルを生成し、.canyon_outputフォルダに保存します。canyon-uploaderコマンドラインツールを使用して、CIでCanyonサーバーに報告することができます。

.github/workflows/report-canyon-output.yml


name: Report Canyon Output
 
jobs:
  report:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # Node.jsのバージョンはプロジェクトの要件に応じて変更可能
      - name: Install dependencies
        run: npm install
      - name: Generate output
        run: npm run build
 
      # .canyon_outputファイルの内容を報告
      - name: Report output
        run: canyon-uploader --dsn=https://canyonjs.org

babelプラグインの更新

keepMapオプションをfalseに設定します

babel.config.js


module.exports = {
  plugins: [
    "istanbul",
    [
      "canyon",
      {
        keepMap: false,
      },
    ],
  ],
};

準備完了

この時点で、ページのwindow.coverageオブジェクトを確認してください。スクリーンショットを参照してください。window.coverageにはmapデータが含まれなくなり、 UIの自動テストカバレッジ収集プロセスでの大量の転送コストを大幅に削減できます。