Adding code coverage to your Cypress E2E Tests in Vite

Micky Dore
3 min readJan 7, 2024

There are tons of benefits to measuring the code coverage of an application. Simply, code coverage shows you what percentage of your codebase is covered by tests, and what parts of your code are not covered by tests. These metrics can help you to understand which parts of your application need more tests to improve reliability. Your code coverage figures can also be passed to other tools such as SonarQube during your CI/CD pipeline to ensure that your code is passing quality checks before it can be promoted to production.

A table showing a list of project files and their code coverage percentages.
An example of a generated code coverage file.

This guide will show you how to generate code coverage reports of your Cypress E2E tests in your Vite project. If you have not yet written tests or configured Cypress in your application, I have a tutorial for how you can do so here. If you do already have tests, then the hard part is over, let’s see how we can generate a code coverage report.

Installing Dependencies

In order to generate a code coverage report for our Cypress tests, there are two things we need to do. We first need to “instrument our application” so that it will track code coverage and we then need to create a script to generate the code coverage report. To accomplish this, we need to install a couple dependencies. You can use the following command to install all of the required dependencies.

--

--

Micky Dore

A curious software developer interested in this 'n' that