Testing a React Application Instrumenting the codebase
Tags: webdev, react, javascript, programming
Published: 2022-10-10 18:11:58

---
title: Testing a React Application Instrumenting the codebase
published: true
date: 2022-10-10 14:05:08 UTC
series: Modern React Testing
tags: webdevelopment,react,javascript,programming
canonical_url: https://relatablecode.com/testing-a-react-application-instrumenting-our-codebase
cover_image: https://cdn-images-1.medium.com/max/1024/0*gI6a-KET0KBywOUk
---

### Introduction

In the previous article, we went over how to update Cypress to its amazing version 10! Now we’ll finish off this series by adding code coverage to our application and incorporating it into our CI. But what is code coverage?

> _Code coverage is a software testing metric that determines the number of lines of code that is successfully validated under a test procedure, which in turn, helps in analyzing how comprehensively a software is verified._ [_Source_](https://www.codegrip.tech/productivity/everything-you-need-to-know-about-code-coverage/)

In most cases, this is a percentage of how much the codebase is being covered by tests. How do we know if a test covers a certain amount of code? Instrumentation of our code monitors and traces the test coverage and gives us accurate reports.

Cool! First, let’s go over what our application does. When clicking on a button it fetches posts from a service and displays them on the page:

![applicationj](https://cdn-images-1.medium.com/max/593/0*gmHy6RMEL65jjvgB)

For reference, you can find the repository [here](https://github.com/diballesteros/react-testing).

### Installing codecov

We will be using [Codecov](https://about.codecov.io/)

> _Ship healthier code faster with less risk._

That’s their motto! But how do we go about using it? In the link above make sure to make an account and connect your repository.

![codecov](https://cdn-images-1.medium.com/max/1024/0*if-2MxPm3cfJzds4)

In the Not yet setup tab we should find our repository.

![not yet setup tab](https://cdn-images-1.medium.com/max/996/0*borvah9sEJFUhA86)

This will give us some brief instructions on how to set up code coverage with our repository. First, let’s install a necessary Cypress package:

```bash
npm install @cypress/code-coverage --save-dev
```

Then in our cypress/support/e2e.js file let's go ahead and import this new code.

In our cypress.config.js we also have to set up the events to correctly execute the code coverage:

```js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
    e2e: {
        baseUrl: 'http://localhost:3000',
        specPattern: 'cypress/integration/**/*.spec.js',
        setupNodeEvents(on, config) {
            require('@cypress/code-coverage/task')(on, config);
            return config;
        },
    },
});
```

Let’s open up our application and cypress to run our test:

```bash
npm run dev 

npm run test-e2e
```

When we run our test we will see the following command:

![log command](https://cdn-images-1.medium.com/max/429/0*RnLu4myu8jCw1OzK)

What we’re missing is the instrumentation for our code. There are a few ways to go about this. But first, let’s add the two new folders to our .gitignore:

```
# Code coverage files 
coverage 
.nyc_output
```

To instrument our code we have to install the following plugin:

```bash
npm install vite-plugin-istanbul --save-dev
```

In our vite.config.js we should import the newly installed library and set it up:

Some interesting notes on how the Istanbul plugin works can be found [here](https://github.com/iFaxity/vite-plugin-istanbul).

Finally, when we run the rest we’ll no longer see the same warning as before:

![no warning](https://cdn-images-1.medium.com/max/425/0*tVNXmX1IEDcjiz1P)

To get a better understanding of what’s going on let’s take a look at the root directory you’ll see a folder, coverage:

![coverage files](https://cdn-images-1.medium.com/max/279/0*4seHbZPH582ATOq7)

You’ll see some JSON files that detail exactly what is covered in the files of the directory we provided earlier in the vite.config.js (./src).

### Wrapping it up

Instrumenting our code base is crucial to providing Codecov with the necessary information it needs to give us the percentage of code coverage we actually have.

In the next article, I’ll go over how to set up the GitHub Action to automatically send the code coverage report to CodeCov with every push. This way you don’t have to think about it at all!

You can find the full code here at this [repo](https://github.com/diballesteros/react-testing).

### Let’s Connect

If you liked this feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/relatablecode) or [Twitter](https://twitter.com/relatablecoder)

Check out my free developer roadmap and weekly tech industry news in my [newsletter](https://relatablecode.substack.com/).