Back to Insights
Martin Funcich

How to Set Up Cypress Code Coverage with TypeScript and TS-Loader

In this short tutorial, IE Grad Developer Christine Schorn shows you how to set up Cypress code coverage.

How to Set Up Cypress Code Coverage with TypeScript and TS-Loader

In this short tutorial, IE Grad Developer Christine Schorn shows you how to set up Cypress code coverage using the @cypress/code-coverage plugin in a TypeScript project.

Note: If you are using babel-loader in your project, this tutorial might not be necessary for you. Instead, I recommend you to follow this tutorial. However, if your project is using the ts-loader, stick with me.

To begin with, let’s assume that you already have a project set up with webpack and TypeScript and that you are using Cypress as your front end testing tool. So you are now at a point where you want to generate a nicely formatted code coverage report.

As it turns out, at the point of writing this, it’s a bit trickier to integrate Cypress code-coverage if you are using the ts-loader, so just following the @cypress/code-coverage plugin setup won’t work. Luckily though, with some more steps, we can get it working for our project as well. So let’s start.

1. Installing babel dependencies

First, we have to install some dependencies to get things rolling. Since Cypress code-coverage doesn’t just work with the ts-loader (as mentioned), we have to add the babel-loader and its necessary dependencies to our project.

yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader

2. Setting up webpack

Since webpack is managing our loaders and we’re only using the ts-loader at the moment, we’ll have to update our webpack.config.js file and add the babel-loader to our rules as well:

cypress 1

You might be wondering why we’re using two transpilers now. In my case, the project was already set up using the ts-loader, so I choose to just add the babel-loader instead of changing the whole project to only use the babel-loader.

3. Setting up babel

Setting up babel is pretty simple. Babel will help us transpile our TypeScript to the right Javascript standard. So let’s create our .babelrc file if you don’t have one already and add the following snippet:

cypress 2

All we do here, for now, is to tell Babel to use it’s React and TypeScript presets and to transpile to a minimum version of IE 11 and Chrome 58.

4. Installing cypress dependencies

yarn add -D @istanbuljs/nyc-config-typescript source-map-support ts-node

Proceed to your package.json file and add the following lines

cypress 3

If you want to save your reports in another folder, you can just change cypress-coverage to the name of your target folder.

I know this is a lot but hang in there. As our next step, let’s install the Cypress code coverage plugin.

yarn add -D @cypress/code-coverage nyc istanbul-lib-coverage

Update your .babelrc file, so it looks like this:

cypress 4

Because the @cypress/code-coverage plugin DOES NOT instrument your code, we have to instrument it ourselves. We are using the Istanbul.js tool for that and since we are now using Babel to transpile our code, we can just add the babel-plugin-istanbul to our .babelrc file and we’re good to go.

Now we’re almost there. Add the following line to your cypress/support/index.js file

import '@cypress/code-coverage/support'

And the following snippet to your cypress/plugins/index.js

cypress 5

As our final step, let’s create a new file cy-ts-preprocessor.js in your cypress/plugins/ folder and paste the following snippet:

cypress 6

Now you should be able to run your tests and get a nicely formatted code-coverage report.

yarn run cypress runopen cypress-coverage/lcov-report/index.html

I hope this helps you to get your Cypress code-coverage going!

Special thanks to all the folks out there who have put out amazing tutorials as well. I would not have been able to write this tutorial without them. If you want to have a further look, check them out below:

For more coding advice, feel free to get in touch with us today.

Looking to solve big problems? Let’s talk.

Partner With Us

Stay in the loop

Get occasional newsletters about IE’s insights. We won’t spam your inbox.
Thank you! You've now been subscribed.
Something went wrong while submitting the form.
IE recognises the Aboriginal and Torres Strait Islander peoples as the Traditional Owners of the lands on which we work, and we acknowledge those communities' continuing connections to their lands, waters, and cultures. We pay our respects to their Elders past and present.