JavaScript Code Coverage Using Github Actions and Codecov

Code coverage is a software-testing metric that determines how many lines of code have successfully validated under a test suite, and is usually measured with specialized tools like Codecov. These tools facilitate reporting and visualizing coverage reports and help developers understand how they can improve their test suite.

This tutorial explores running tests and generating code coverage in a Node application, as well as how to automate report generation and upload them from GitHub to Codecov using GitHub Actions.

Running JavaScript Tests and Coverage Locally with Jest

You can run tests and code coverage locally on your JavaScript application with Jest. Conveniently, Jest offers but doesn’t require much configuration for most JavaScript projects.

You can use the sample application by cloning it from GitHub:

git clone https://github.com/AdeyinkaAdegbenro/codecov_jest.git

Once you’ve cloned the sample application, Jest has already been added to the package.json file, so you’re ready to install it:

npm install

In the application folder, you should see two files: hello_world.js and hello_world.test.js. The hello_world.js file contains the function hello_world, which accepts a number and checks whether it is even or odd before returning a corresponding output. The hello_world.test.js is the Jest test file for hello_world.js.

Jest has already been added to the npm test command. This means you can run both the test and coverage using Jest directly from the command line by running:

npm run test

Jest will generate the coverage report and put it in a folder called coverage. Commit your code changes and push the sample application to a new repository on GitHub.

Setting Up GitHub Actions

Now that you can run tests and code coverage locally on the sample application, it’s time to take it up a notch by incorporating code coverage reporting into your continuous integration flow with GitHub Actions.

GitHub Actions enables you to add continuous integration to your GitHub repository using workflows you can define in a .yml file. These are stored in a directory called .github/workflows.

To set up GitHub Actions, you need to configure a workflow file. In the sample application, create a .github/workflows/ directory. Then, in the.github/workflows/ directory, create a new file coverage.yml. Note that the YAML file can be renamed to whatever you want.

mkdir .github/workflows && cd .github/workflows

touch coverage.yml

In the coverage.yml file, add the following lines:

name: Running Code Coverage

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2
      with:
        fetch-depth: 2 

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test -- --coverage

For more information about the GitHub Actions configuration file, check out the workflow syntax reference.

Setting Up Codecov for Code Coverage Reporting

After signing up for Codecov, you’ll be redirected to a page where you can select the repositories you want to use. Select the repository containing the sample application you cloned previously.

Next, you’ll be taken to a dashboard, where you’ll see a token. You’ll only need this token if your repository is private. Go to the coverage.yml file and add the following code block to the bottom of the steps section:

- name: Upload coverage to Codecov
      uses: codecov/codecov-action@v2

Here, we use the codecov-action@v1 application in GitHub Actions. This application also automatically uploads coverage reports to Codecov once they are available.

If you’re dealing with a private repository, copy the token on the Codecov dashboard, and then go to your chosen repository’s settings tab. Click Secrets -> New Repository Secret and add a secret named CODECOV_TOKEN. Paste the token copied from your Codecov dashboard and click Add Secret to save.

In the Github Action workflow file, in the Upload Coverage to Codecov section, add the token as specified here:

- name: Upload coverage to Codecov
    uses: codecov/codecov-action@v2
    with:
        token: ${{ secrets.CODECOV_TOKEN }}

Add and commit all your changes to GitHub. On the repository, click the Actions tab to see your workflow in progress. Assuming your updates were to the master branch, Codecov will display the job, its steps, and results in real time.

Viewing Code Coverage in Codecov

To view the code coverage report in Codecov, go to the Codecov dashboard and select your repository. You should see the coverage report in the Overview tab. If you want to see coverage data for different commits, click on the Commit tab to see a list. Clicking a commit will show you the code coverage report for that commit.

Optionally, you can get a direct link to the Code Coverage Report in Codecov from the Actions tabs on your Github repository. On the Actions tab, click the latest run workflow, then select the specific build you want to inspect. At the bottom of the Upload coverage to Codecov section, you should see a direct link to your code coverage report on Codecov.

Conclusion

This tutorial has demonstrated how to test and run code coverage on a JavaScript application, as well as how to configure GitHub Actions and the CodeCov tool to automate running tests and generating and uploading coverage reports. Remember, Codecov is product-agnostic—with support for over twenty different languages and several continuous integration platforms and code-hosting platforms, they can help you assess how comprehensively your codebase is tested, so you can focus on producing quality code.