DEV Community

marcellothearcane
marcellothearcane

Posted on

Get code coverage reports with Github Actions and Codecov

TLDR: Show me the money


So, you've spent some time getting tests set up on your project. How do you show the world?

A popular service is Codecov, and you'll probably recognise their badges from Github repositories:

100% coverage on Codecov

However

Codecov is a static analysis tool, which means you have to upload reports that have already been tested. One option is to commit your coverage folder, but this is a bad idea:

  • You have to run your tests before every commit. Chances are you'll forget, and your coverage will be out of date.
  • You won't be able to edit away from your main computer (i.e. you can't update the tests from your phone).
  • It isn't automated enough, and everyone knows more automation is better.
  • Probably loads of bad things.

Github Actions to the rescue!

Github Actions is a fairly new (I think?) feature that allows you to add CI to your project.

There's a few default templates, but unfortunately none that I could find for running tests and sending the reports over to Codecov.

Set up a Github Action

Github actions are stored in .github/workflows, and are YAML files that specify how the job should run. Check out the docs to find out more.

We'll set up a simple task by adding a file called codecov-test-suites.yml and adding the following:

# .github/workflows/codecov-test-suites.yml

name: Run Test Suites

on: [push]
Enter fullscreen mode Exit fullscreen mode

This sets up a new workflow that triggers for every push.

Now we need to make it do things! You need to add a job to this file, which does the following:

  • Fetches the files
  • Installs the dependencies
  • Runs the test
  • Uploads the test to Codecov

This is easy. Add this to the codecov-test-suites.yml file:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2 # Check out your repository
    - run: yarn # Install dependencies
    - run: yarn test --coverage # Run test
    - run: bash <(curl -s https://codecov.io/bash) # Upload to Codecov
Enter fullscreen mode Exit fullscreen mode

Your test should run, but apparently you have 0% coverage. What?

Codecov can't process your report

It turns out the tests are run in a weird folder, and this doesn't tie up with your repository structure, so Codecov gets confused.

To fix this, you need to add a codecov.yml file to your project root. In here, we'll specify how to fix the file paths:

# codecov.yml

fixes:
  - "/home/runner/work/<project name>/<project name>/::" # Correct paths
Enter fullscreen mode Exit fullscreen mode

Edit <project name> to your repository name from Github, and commit this.

Huzzah! Github Actions should now be automagically running tests every time you push and sending to Codecov!

Be sure to head to Codecov's badge settings and get that sweet SVG goodness:

Badges badges badges badges badges!

Remember that 100% badge from earlier?

Can't get enough of that 100%


The money

// package.json

{
  // Make sure jest creates lcov reports
  "jest": {
    "collectCoverage": true,
    "coverageReporters": ["html", "lcov"]
  }
}
Enter fullscreen mode Exit fullscreen mode
# .github/workflows/codecov-test-suites.yml

name: Run Test Suites

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2 # Check out your repository
    - run: yarn # Install dependencies
    - run: yarn test --coverage # Run test
    - run: bash <(curl -s https://codecov.io/bash) # Upload to Codecov
Enter fullscreen mode Exit fullscreen mode
# codecov.yml

fixes:
  - "/home/runner/work/<project name>/<project name>/::" # Correct paths
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
seokjeon profile image
Se-ok Jeon

Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this article? If you don't mind, I wanna share this awesome information in Korean. Surely, There will be a link directing to this original one.

Collapse
 
johannchopin profile image
johannchopin

You spend me a lot of Googling effort thanks <3

Collapse
 
davidmaceachern profile image
David MacEachern

This is awesome thanks for sharing!