Separate Hit and Map

Collect initial coverage source files generated during Babel compilation in CI

Reasons

1. Collect complete compiled files: During the compilation process, through the babel-plugin-canyon plugin, analyze and parse the initial coverage files for each compiled file, and save them to the .canyon_out folder.

2. Collect early to reduce pressure: When you don’t report initial coverage files, these coverage files will be reported during UI automation testing, which creates enormous transmission pressure. Collecting early can reduce transmission pressure by more than 90%.

Report Initial Coverage Data

The babel-plugin-canyon plugin generates initial coverage files for compiled files during compilation and saves them to the .canyon_output folder. We provide the Tools CLI command-line tool, which you can use in CI to report to the Canyon server.

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" # You can modify the Node.js version according to project requirements
      - name: Install dependencies
        run: npm install
      - name: Generate output
        run: npm run build
 
      # Report .canyon_output file contents
      - name: Report output
        run: canyon-uploader map --dsn=https://canyonjs.org

Update Babel Plugin

Configure the keepMap option to false

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

Ready

Now check the window.coverage object on the page, see the screenshot. The window.coverage no longer contains map data, which can greatly reduce the large transmission costs during UI automation coverage collection.