Vue coverage on Github actions

Let's create Vue3, Jest-based Github Actions unit test coverage reports!

Recently, I was involved in creating some DevOps duties to get some unit test coverage statistics on our DevOps pipelines. It took me more evenings than I wished for, so I will share my setup for this combination of techniques. My CICD built tools consist of:

• Vue3 on Typescript and relying on vue-cli scripts
• Webpack
• Jest for unit tests
• Github with Github actions for builds

Jest config for Vue3 project

My jest.config.js extends the default Vue3 typescript config and extends it using the following properties.

const { defaults } = require('jest-config');

const config = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  roots: ['./src/'],
  moduleFileExtensions: [
    'js',
    'jsx',
    'ts',
    'json',
    // tell Jest to handle *.vue files
    'vue',
  ],
  clearMocks: true,
  coverageReporters: ['html'],
  coverageDirectory: '<rootDir>/test/unit/coverage/html',
  coverageThreshold: {
    global: {
      lines: 80,
    },
  },
  testMatch: ['**/*.spec.ts'],
};

module.exports = config;

The default config here is setup to create an HTML report that serves as feedback for the developer to diagnose and fix coverage issues.

Please note, that the output of this report is not relevant to our Github actions.

Github Action workflow file

The first step is setting up a Github action workflow where your Jest tests are fired using the vue-cli command line tool. I came up with the workflow below.

jobs: 
  unit-test:
    runs-on: ubuntu-latest
    permissions:
      checks: write
      pull-requests: write
      contents: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
         path: ~/.npm
         key: npm-${{ hashFiles('package-lock.json') }}
         restore-keys: npm-
      - name: Prep NPM dependencies
        run: npm install -f
      
      - name: Test NPM test:unit
        run: npm run test:unit

Unit test coverage reports

This is where the pain started. I quickly found a decent plugin that seemed popular and well documented on the Github Marketplace called Jest Coverage Report. Coverage checks and pull request enrichments are the core features of any of these plugins, and it looks solid. However, the documentation did not work out for me, and it took some fiddling with the config to get it right.

Coverage report from the Jest Coverage Report

Eventually, I came up with the following setup. After switching some options I decided to keep the running of the Jest contained to the vue-cli call. I added an NPM script entry to my package.json containing the following instruction:

"test:unit:coverage:ci": "vue-cli-service test:unit --coverage --json --testLocationInResults --outputFile=test/unit/coverage/report.json",

This will generate a report compatible with the Github coverage plugin. The next step is adjusting the pipeline.

# newly added to the pipeline
- name: Test NPM test:unit
  run: |
    npm install -f
    npm run test:unit:coverage:ci

- name: Jest coverage report
  uses: ArtiomTr/jest-coverage-report-action@v2.0.8
  with:
    skip-step: all
    coverage-file: ./test/unit/coverage/report.json
    base-coverage-file: ./test/unit/coverage/report.json

The results in annotated and enriched pull requests with your coverage statistics. You can set your desired coverage threshold by simply adding the following config to your jest.config.js.

// jest.config.js
“coverageThreshold”: {
   “global”: {
   “branches”: 80,
   “functions”: 80,
   “lines”: 80,
   “statements”: -10
   }
 }

Traps/caveats

• The ‘coverage — json’ part in my npm script resulted in a different output compared to the reporter ‘json’ in my jest.config.js. The JSON reporter did not result in a report that could be interpreted by the plugin.
• The permissions needed to be set to ‘contents: write’, in contrast to docs. Github issue raised.

Have fun with your coverage reports!