Hosting code coverage results in Circle CI

I’ve been lately working on a large Node.js application, and running the full test suite with code coverage instrumentation became more a more time consuming. Some of my other projects generate HTML code coverage results on CI and publish the outcome on GitHub Pages, but doing so here would mean that anyone would be able to see the coverage reports, and thus the code.

My friend Lucian Buzzo and I discovered that Circle CI serves build artifacts in a way that makes it possible to store the coverage assets there and browse them directly. This means that we can publish code coverage results only to people with access to the repository, and so the builds, and that we can easily browse code coverage results even before we merge a pull request.

This is how .circleci/config.yml looks like for an example Node.js project using Istanbul:

# Javascript Node CircleCI 2.0 configuration file
# Check for more details
version: 2
      - image: circleci/node:7.10
    working_directory: ~/repo
      - checkout
      - run: npm install
      - run: npm test

      - store_artifacts:
          path: coverage
          destination: coverage

The store_artifacts setting will save coverage, the directory where Istanbul stores the generated HTML (when using --reporter=lcov). The destination property defines the artifact’s readable name. This property is optional, and defaults to the absolute path to the artifact: /home/circleci/repo/coverage.

Circle CI will now start uploading the coverage directory on every job:

Uploading Artifacts Circle CI step

Once the build completes, we will see a new “Artifacts” tab that contains the uploaded files:

Circle CI Coverage Artifacts

Clicking index.html will render the coverage results right in your browser, and if the repo is private, you will get a must be logged in error message if you don’t have the right access:

Circle CI Istanbul Coverage

You can even try it yourself on one of my personal projects, queryl.