Code Coverage with React, Vite, RTL & Cypress

My newest post involves one of our recent projects to move our react microfrontend to use Vite. I will summarise in this post how we managed to collect code coverage statistics from RTL and Cypress tools to have a combined coverage level for our development process. But before jumping to technical details let's review the background story.

Initially using Webpack and decided to move to Vite for reasons that you may already know like:

• It aims to provide a faster and more efficient development experience for developers by using the native ES modules feature in the browser
• Ability to handle large JavaScript projects with ease
• Excellent documentation

The above are just some few key features of Vite that makes it stand out from other solutions.

We already know what is Cypress?

With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds. It can easily be integrated in your react projects and run both component and integration tests at ease as part of your development pipeline.

But what about your component tests?

If the team is more flexible you can use Cypress even to test your react components but most of the teams are more aware of RTL(react testing library) so in our projects as well we stick to use this to drive our component tests.

And what about code coverage?

When it comes to code coverage we picked Instanbul.
Istanbul instruments your ES5 and ES2015+ JavaScript code with line counters, so that you can track how well your unit-tests exercise your codebase. The nyc command-line-client for Istanbul works well with most JavaScript testing frameworks: tap, mocha, AVA, etc.

Now that we had some few introductions lets deep dive into the setup needed to start measuring code coverage on your react project.

First install the needed tool to instrument your react app as Vite plugin yarn add vite-plugin-istanbul -D.

After we installed the package we need to change the vite.config.ts file accordingly

From the configuration above you will see that we used instanbul for both cypress e2e & rtl tests.

But we will not see all the files because Istanbul by default uses coverage only for those files for which there are tests, in order to configure Istanbul reports more flexibly, add the following package:

yarn add @istanbuljs/nyc-config-typescript -D

Now create the .nycrc.json to store settings for cypress tests.

Ok great we can now generate reports for each tests (RTL & Cypress) but it would be extremely useful to merge both under one single report.

Conclusion
That’s all, thanks for reading, in this article we figured out how to add code coverage support to our application using React and Vite for both unit and e2e tests.