
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.